【面试八股】2023高频前端面试题、上千条问题与答案HTML +CSS 什么是BFC？如何触发？有何特点？如何解决mar

HTML +CSS

JavaScript

创建模式 (5种)

工厂方法模式（Factory Method）
抽象工厂模式（Abstract Factory）
单例模式（Singleton）
建造者模式（Builder）
原型模式（Prototype）

结构模式（7种）

适配器模式（Adapter)
装饰模式（Decorator）
代理模式（Proxy）
外观模式（Facade）
桥接模式（Bridge）
组合模式（Composite）
享元模式（Flyweight）

关系模式（11种）

策略模式（strategy）
模板方法模式（Template Method）
观察者模式（Observer）
迭代子模式（Iterator）
责任链模式（Chain of Responsibility）
命令模式（Command）
备忘录模式（Memento）
状态模式（State）
访问者模式（Visitor）
中介者模式（Mediator）
解释器模式（Interpreter）

JavaScript 代码编程实战

了解JavaScript中的this指向吗？下面的this 指向哪里？

setTimeout(function () {
  console.log(this)
}, 1000);


/*  浏览器中
Window {window: Window, self: Window, document: document, name: '', location: Location, …}
*/

/* node中 
Timeout {
  _idleTimeout: 1000,
  _idlePrev: null,
  _idleNext: null,
  _idleStart: 68,
  _onTimeout: [Function],
  _timerArgs: undefined,
  _repeat: null,
  _destroyed: false,
  [Symbol(refed)]: true,
  [Symbol(asyncId)]: 2,
  [Symbol(triggerId)]: 1
}
*/

下面输出的是什么，为什么？this应该如何输出正确的指向？

var counter = {
  count: 0,
  addCount() {
    // setTimeout()的匿名函数中的this，指向的是宿主对象(浏览器：window｜node：Timeout)
    setInterval(function () {
      console.log(this);
      console.log(++this.count);
    }, 1000)
  }
}
counter.addCount()
/* 
Timeout {
  _idleTimeout: 1000,
  _idlePrev: null,
  _idleNext: null,
  _idleStart: 1026,
  _onTimeout: [Function],
  _timerArgs: undefined,
  _repeat: 1000,
  _destroyed: false,
  count: NaN,
  [Symbol(refed)]: true,
  [Symbol(asyncId)]: 2,
  [Symbol(triggerId)]: 1
}
NaN
...
*/

/* 改善 */
var counter = {
  count: 0,
  addCount() {
    setInterval(function () {
      console.log(++this.count);
    }.bind(this), 1000)

    let self = this
    setInterval(function () {
      console.log(++self.count);
    }, 1000)

    setInterval(() => {
      console.log(++this.count);
    }, 1000)
  }
}

块级作用域：下面sum和i是多少？

var arr = [1, 2, 3, 4]
var i = 100;

for (var i = 0; i < arr.length; i++) {
  if (i == 0) { sum = 0 }
  sum += arr[i]
}

console.log(sum,i); 
/* 
// 因为JavaScript没有块级作用域，因此能在for语句外部访问变量 i 和 sum
console.log(sum);  // 10
console.log(i);    // 4 
*/

说一下 1|2|4 等于多少，原理是什么？

const a = 1
const b = 2
const c = 4
console.log(a | b | c);

递归循环引用该怎么解决？

// 对传入的 subject 对象内部存储的所有内容执行回调
function execRecursively(subject, fn) {
  fn(subject);
  if (typeof subject === "object") {
    for (const key in subject) {
      execRecursively(subject[key], fn);
    }
  }
}

const foo = { foo: "Foo", bar: { bar: "Bar", }, };
foo.bar.baz = foo; // 循环引用！
execRecursively(foo, (obj) => console.log(obj));

let obj1 = { name: "ken" }
let obj2 = { name: "一缕清风" }
obj1.obj2 = obj2
obj2.obj1 = obj1
execRecursively(obj1, (obj) => console.log(obj));

/*
    const constructorName = getCtxStyle(value, constructor, tag).slice(0, -1);
RangeError: Maximum call stack size exceeded
*/

事件循环中，下面题目输出什么，为什么？

console.log(1);

Promise.resolve().then(() => {
  console.log(2);
  setTimeout(() => {
    console.log(3);
  }, 0);
});
setTimeout(() => {
  console.log(4);
  new Promise((resolve) => {
    console.log(5)
    resolve();
  }).then(() => { console.log(6); });
}, 0);

console.log(7);

/* 
1
7
2
4
5
6
3
*/

当a=？，下面条件成立

if (a == 1 && a == 2 && a == 3) {
console.log("Hello word");
}

// 答案
var a = {
  value: 1,
  valueOf: function () {
    return this.value++;
  },
  [Symbol.toPrimitive]() {
    return this.value++;
  }
}

函数柯里化，实现一个 add函数，能满足一下能力:

add(1，2，3)（）=>输出6
add(1)(2)（3)（）=>输出6
add(1,2)(3)(4,5,6)(7,8)()=>输出 36
add(1,2)(3,4,5,6)()=>输出 21
function add() {}

["1,", 2, 3].map(parseInt) 的执行结果是多少？

console.log(["1,", 2, 0, 3].map(parseInt));  // [ 1, NaN, 0, NaN ]


/*
[ 1, NaN, 0, NaN ]
console.log(parseInt("1", 0));  // 1
console.log(parseInt(2, 1));    // NaN
console.log(parseInt(0, 2));    // 0
console.log(parseInt("3", 2));  // NaN


因为 parseInt需要两个参数（val, radix），
其中 radix表示解析时用的基数（进制）；
map传递了3个参数（item, index,aray），对应的radix不合法导致解析失败。
*/

用户需要上传一个文件，你需要根据文件的后缀来做限制一些操作？下面获取后缀的方法有什么缺陷？你有什么办法解决吗？答案：后缀名字容易被魔改后绕过判断鉴定。解决：我们可以根据二进制前几位特定的字节来判断后缀

function getSuffix(filePath) {
  //文件路径
  var index = filePath.lastIndexOf(".");  //获取最后一个.的位置
  var ext = filePath.slice(index + 1);    //获取后缀
  console.log(ext);                       // 输出：png
}

let suffix = getSuffix("file://upload/test.png")
if (suffix = "png") {
  // 上传服务器
}

TypeScript

浏览器

计算机网络

网络安全

React生态

知道 react 的 fiber，谈谈它的作用和实现?
述说 React 和 Vue 的区别
redux主要解决什么问题？有什么优缺点？
如何划分业务组件和技术组件？
React生命周期函数
React 性能优化方案有哪些？和哪个周期函数关联性较大？
为什么虚拟dom会提高性能？
DOM Diff 算法? react 的 diff 算法?
简述Virtual DOM 真的比操作原生 DOM 快吗？
简述 flux 思想
React 项目用过什么脚手架？
React 解决了什么问题？
React的工作原理？
使用React有何优点？
展示组件(Presentational component)和容器组件(Container component)之间有何
类组件(Class component)和函数式组件(Functional component)之间有何不同？
状态(state)和属性(props)之间有何不同？
应该在React组件的何处发起 Ajax请求？
在React中，refs的作用是什么？
何为高阶组件(higher order component)?
setState发生了什么？是同步还是异步？
为什么建议传递给setState的参数是一个callback而不是一个对象？
除了在构造函数中绑定this，还有其它方式吗？
怎么阻止组件的渲染？
当渲染一个列表时，何为key？设置 key 的目的是什么？
为什么要设计 React hook，它解决了什么问题？
react中的hooks为什么不能写在判断代码块中？为什么React的Hooks不能在if里面调用呢？

Vue生态

简述Vue的MVVM模式？
间述MVC和MVVM的区别？
说一下Vue2中的路由守卫？
说说你对Proxy的理解。
说一下 proxy 中的 receiver 是做什么用的？
说说你对Vue的理解，有何优缺点？
Vue和React有什么不同？
什么是虚拟 DOM?
描述下vue的生命周期有哪些？分别做了什么事情？
watch怎么深度监听对象变化
删除数组用delete 和Vue.delete 有什么区别?
watch 和computed有什么区别？
v-for 没有key会发生什么问题？
你讲一下vue双向绑定的原理
v-model是什么？有什么用呢？
在vue项目中如何引入第三方库？有哪些具体操作方法？
Vue3.0里为什么要用Proxy API替代 defineProperty API?
Vue3.0编译做了哪些优化？
Vue3.0新特性--Composition API与 React.js中Hooks的异同点
vue 要做权限管理该怎么做？如果控制到按钮级别的权限怎么做？
vue 在created和mounted这两个生命周期中请求数据有什么区别呢？
Vue3.0性能提升主要是体现在哪些方面？
vue3有哪些新特性？
vue3有哪些新的组件？
Vue2.0和Vue3.0有什么区别？
Composition Api 与 Options Api有什么不同?
对Vue项目你做过哪些性能优化？
Vue组件通信的方式有哪些？
Vue常用的修饰符有哪些？
Vue中的$nextTick有什么作用？底层如何实现？
v-show和v-if有什么区别?
有用过keep-alive吗？它有什么作用？
如何实现一个虚拟DOM吗?
为什么data属性是一个函数而不是一个对象，具体原因是什么？
Vue2的初始化过程你有过了解吗，做了哪些事情？
Vue3初始化的一个大概流程？
vue3响应式api如何编写？
在Vue项目中你是如何做的SSR渲染
说一下最长递增子序列？
讲一下vue3相比vue2有哪些提升
讲一下vue3相比vue2，它在diff算法上做了哪些优化？
vue3.0 是如何变得更快的？dom diff 算法有何优化？
vue2为什么要对数组的常用方法进行重写？

混合开发面试题

移动web开发

移动布局方案
讲讲viewport和移动端布局
什么是rem布局？
Rem布局及其优缺点
CSS单位中px、em和rem的区别？配合font-size如何计算？（移动端适配方案)
说一下CSS长度单位？
px、em、rem、%、vw、vh、vm这些单位的区别
2X图、3X图适配
移动端适配1px的问题
移动端性能优化相关经验
移动端兼容性
小程序
图片在安卓上，有些设备模糊问题
固定定位布局键盘挡住输入框内容
click的300ms延迟问题和点击穿透问题
防止手机中页面放大和缩小
移动端适配-dpr 浅析
移动端扩展点击区域
上下拉动滚动条时卡顿、慢
长时间按住页面出现闪退
webkit mask 兼容处理
transiton 闪屏

微信小程序

flutter

兼容性问题

性能优化

前端模块工程化

你平常包管理器用的哪个？
打包工具了解哪些？简要说下Webpack、Rollup、Parcel等有什么区别？
简述前端自动化构建工具？答案：Webpack、 Vite、 Parcel、 Rollup、 esbuild、 Gulp、 swc、Rome、 Turbopack、 Snowpack、 Nx、 WMR、 Rspack
有用过Vite吗，为什么Vite会那么快？
微前端适用于什么场景？设计一个微前端框架要怎么考虑？微前端适用于什么场景？设计一个微前端框架要怎么考虑？
简述前端模块化开发的认识理解？
简述模块化的JavaScript开发的优势？模块化开发的好处是什么？
简述require.js解决了什么问题？
说一下 CommonJS、AMD和 CMD?
commonJS中的require/exports和 ES6中import/export的区别是什么
简述CMD(Common module Definition，通用模块定义）规范的理解？
讲一下你了解哪些前端模块化规范？
AMD 和 CMD 的区别？
简述CommonJS规范？
简述EMAScript 6模块规范？
前端模块化是否等同于JavaScript模块化？
如何理解前后端分离
dependencies 和devDependencies 两者区别？

babel

webpack

简述对webpack的理解？
有自己配置过webpack吗？如果需求是多页面与单页面并行，需要如何配置？
Webpack的优点是什么？
Webpack的构建流程是什么？从读取配置到输出文件这个过程尽量说全
讲一下webpack的打包原理、流程
说一下Webpack的热更新原理监控文件改变监控文件改变 watchFile
如何利用Webpack来优化前端性能
使用Webpack开发时，你用过哪些可以提高效率的插件？
如何提高Webpack的构建速度？
什么是长缓存？在Webpack中如何做到长缓存优化？
怎么实现Webpack的按需加载？什么是神奇注释?
有哪些常见的Loader？他们是解决什么问题的
Loader 和Plugin的不同？
是否写过Loader 和Plugin？描述一下编写 loader 或 plugin的思路？
webpack和vite区别（模块化与流的区别)
webpack文件指纹策略：hash chunkhash contenthash
讲一下你对webpack5模块联邦的理解？
简述下 npm 模块安装机制，为什么输入 npm install 就可以自动安装对应的模块？

常用框架的

echarts的基本用法？
如何在vue中引入？
如何绘制条形图？
切换时卡顿如何解决？
echarts图表自适应div resize问题？
你有开发过不用脚手架的项目吗？你封装过哪些脚手架，其他同事怎么用你封装的脚手架？

Nodejs

对Node.js有没有了解，它有什么特点，适合做什么业务或场景？
Node的优点是什么？缺点是什么
说一下前端前端解决的方法？后端node是怎么解决跨域的
怎么解决express跨域的？解决案例
简述同步和异步的区别，如何避免回调地狱，Node的异步问题是如何解决的？
node的stream（流）?
说说 Buffer 与字符编码？
能说一下什么是中间件吗？
谈谈你对Express和Koa的理解，二者的区别是？
谈谈对egg和nest.js的理解，二者的区别是？
什么是BFF？答案：中间层，像SSR用来解决SEO问题，GraphQL用来聚合数据，解决API查询的问题
什么是ORM？Nodejs的ORM框架有哪些？答案 Sequelize、TypeORM
SQLite是什么？
有没有了解过Redis？
有没有做过数据库优化？
有了解过分布式和微服务吗？
描述一下从接到url开始，到逻辑处理，到DB查询，到返回结果，整个过程是怎么处理的？

Mysql

mysql和mongoDB有什么区别

算法

// 把下面变成以下格式：
var data = [
  ['A1', 'A2'],
  ['B1', 'B2', 'B3'],
  ['C1', 'C2'],
];

/* 
[
  ['A1', 'B1', 'C1'],
  ['A1', 'B1', 'C2'],
  ['A1', 'B2', 'C1'],
  ['A1', 'B2', 'C2'],
  ['A1', 'B3', 'C1'],
  ['A1', 'B3', 'C2'],
  ['A2', 'B1', 'C1'],
  ['A2', 'B1', 'C2'],
  ['A2', 'B2', 'C1'],
  ['A2', 'B2', 'C2'],
  ['A2', 'B3', 'C1'],
  ['A2', 'B3', 'C2']
] 
*/

说一下你知道哪些排序，各有什么特点？说下他们的空间复杂度和时间复杂度
能否手写一个快速排序
写个直接插入排序
写一个归并排序
手写一个LRU缓存算法
深度优先遍历（DFS）和广度优先遍历（BFS）
如何把斐波那契数列优化成O(n)? 优化时间复杂度**采用公式算法，查看 **复杂度为O(log2n)的代码案例

function Fibonacci(n) {
  var sqrt = Math.sqrt(5);
  var phi = (1 + sqrt) / 2.0;
  var fn = (Math.pow(phi, n) - Math.pow(1 - phi, n)) / sqrt;
  return fn;
}

console.log(Fibonacci(5))

**采取空间换时间的方法，**查看闭包 + 记忆函数的案例

class XXX {
  public static void main(String[] args) {
    System.out.println(new XXX().Fibonacci(12)); // 144
    System.out.println(new XXX().Fibonacci2(12)); // 144
  }

  public int Fibonacci(int n) {
    if (n <= 1)
      return n;
    else {
      int[] f = new int[n + 1];
      f[0] = 0;
      f[1] = 1;

      for (int i = 2; i <= n; i++) {
        f[i] = f[i - 1] + f[i - 2];
      }

      return f[n];
    }
  }

  public int Fibonacci2(int n) {
    if (n <= 1)
      return n;
    else {
      int iter1 = 0;
      int iter2 = 1;
      int f = 0;

      for (int i = 2; i <= n; i++) {
        f = iter1 + iter2;
        iter1 = iter2;
        iter2 = f;
      }

      return f;
    }
  }
}

项目管理

团队成员线上出现p0级 bug，你会怎么处理？

**紧急响应：**立即响应并确认该问题的严重性和紧急程度。P0级别的bug通常表示系统的重要功能受到了严重影响，可能导致系统崩溃、数据丢失或用户无法正常使用。
**集中资源：**我会与团队成员紧密合作，集中所有可用的资源和专业知识来解决这个问题。这可能包括开发人员、测试人员、运维人员和其他相关人员。
确定根本原因：我们会对该问题进行深入分析，以确定导致P0级别bug的根本原因。这可能涉及代码审查、日志分析、排查线上环境等。目标是快速而准确地找到问题所在，并采取措施解决它。
**实施临时修复：**在查找根本原因和解决方案的过程中，我们会优先考虑实施临时修复措施，以尽快恢复系统的正常功能。这可以是一种临时性的解决方案，用于减轻问题的影响并确保系统的稳定性。
**持续沟通：**我会与相关利益相关者保持密切沟通，包括产品经理、项目经理、客户和其他相关团队。我会及时向他们报告问题的进展、解决方案和预计的时间表，以便他们了解问题的状态并采取适当的措施。
**彻底解决问题：**一旦临时修复措施实施成功，我会确保团队致力于彻底解决该问题，以防止类似问题的再次发生。这可能包括代码重构、流程改进、自动化测试增加等，以提高系统的稳定性和质量。
**审查和总结经验：**一旦问题解决，我会与团队一起审查该事件，总结经验教训，并提出改进意见。这有助于我们识别潜在的改进机会，以及避免类似问题在未来的发生。

总的来说，处理P0级别的bug需要快速响应、紧密合作和专注于解决问题。我会确保团队充分投入，并采取适当的措施来最大限度地减轻问题的影响，并确保系统的正常运行。同时，我也会注重预防措施，以避免类似问题的再次发生。

如果团队的人不服你，你会怎么处理？

**倾听和理解：**首先，我会倾听他们的观点和不满，努力理解他们的立场和关注点。这可以通过开放的对话和沟通来实现，以确保每个人都有机会表达自己的意见和观点。
**解决冲突：**如果存在团队成员之间的冲突或分歧，我会努力促成解决方案。这可能包括组织团队会议、提供调解或引入其他解决冲突的方法，以便找到双方都可以接受的共同点和妥协方案。
**透明和开放：**我会保持透明和开放的沟通方式，与团队成员分享决策背后的原因和依据，以便让他们了解决策的合理性和目标。这可以帮助建立信任和理解，减少不满和猜测。
**激励和赋能：**我会努力激励团队成员，帮助他们理解自己的价值和贡献，以及他们在团队中的重要性。我会提供支持和资源，使他们能够充分发挥自己的能力，并参与到决策和解决问题的过程中。
**持续改进：**我会积极寻求反馈和建议，不断改进我的领导方式和团队管理策略。我相信通过反思和学习，我可以提高自己的领导能力，并与团队成员建立更加积极和有效的工作关系。

总的来说，我会致力于建立开放、包容和积极的团队文化，促进良好的团队合作和共同目标的实现。如果团队成员不服从，我会尽力采取适当的措施来解决问题，并确保每个人都感到被尊重和重视。前端开发团队开发宫格流程图

研发流程

技术设计

你知道有哪些互联网专业术语？
设计文档需要涵盖哪些部分？

代码规范

谈谈eslint，ESLint有什么用？你有用它来规范过团队代码吗？

研发协同 (Git)

git 的基本使用方法
讲一下你最常用的git命令，你们团队的git提交规范是什么？
我们在本地工程常会修改一些配置文件，这些文件不需要被提交，而我们又不想每次执行git status时都让这些，文件显示出来，我们该如何操作？
git fetch 和git merge 和git pull的区别。
如何把本地仓库的内容推向一个空的远程仓库
git 工作流程
需要合并别人代码进来
需要切换分支
我们如何使用 git 和开源的码云或github上面的远端仓库的项目进行工作呢
git、github、gitlab 三者之间的联系以及区别
github 和码云的区别
提交时发生冲突，你能解释冲突是如何产生的吗？你是如何解决的
如果本次提交误操作，如何撤销
git 修改提交的历史信息
如何删除github和gitlab上的文件夹
如何查看分支提交的历史记录？查看某个文件的历史记录呢
rebase与merge的区别？
git reset、git revert 和git checkout 有什么区别？
git 跟svn有什么区别
谈谈commit message 规范

测试

单元测试如何做？
如何解决联调依赖问题？
提测阶段bug和线上bug解决过程有和区别？

发布上线

流水线如何搭建
对Docker理解
pm2与 docker 有何区别？