第一套面试题

1. 请解释 JavaScript 中的原型链和继承机制。ES6 的 class 与传统原型继承有何不同？

• 答：JS 原型的核心原理就是基于原型 prototype，这种方式实现的继承叫做原型继承。原型链是指任何的 js 对象的__proto__属性都会指向他的原型对象的 prototype，这样到最后都会指向到 Object.prototype.__proto__ === null，这是原型链的终点。

2. React 组件的生命周期有哪些？函数组件和类组件在生命周期处理上有什么区别？

3. 浏览器的渲染过程是怎样的？重排(reflow)和重绘(repaint)的区别是什么？如何优化？

• 答：浏览器的渲染过程包括：解析 HTML、CSS 解析、构建 DOM 树、构建 CSSOM 树、布局（重排）和绘制（重绘）。
• 重排(reflow)：当 DOM 结构发生变化时，浏览器需要重新计算元素的位置和大小，这称为重排。
• 重绘(repaint)：当元素的样式发生变化时，浏览器需要重新绘制元素，这称为重绘。
• 优化：
  1. 用 transform 做形变和位移可以减少 reflow
  2. 避免逐个修改节点样式，尽量一次性修改
  3. 使用 DocumentFragment 将需要多次修改的 DOM 元素缓存，最后一次性 append 到真实 DOM 中渲染
  4. 可以将需要多次修改的 DOM 元素设置 display: none，操作完再显示。（因为隐藏元素不在 render 树内，因此修改隐藏元素不会触发回流重绘）

4. 请分析下面代码可能引起的性能问题

<script>
  const box = document.getElementById("box");
  for (let i = 0; i < 1000; i++) {
    box.style.left = i + "px";
    box.style.top = i + "px";
  }
</script>

• 答：代码中的box.style.left和box.style.top会触发重绘，因为每次修改都会导致浏览器重新绘制元素。可以先将需要修改的 DOM 元素设置 display: none，操作完再显示。

5. 什么是闭包？通俗的说，闭包就是函数作用域的变量在函数执行完成之后，依然可以被函数外部访问，这个函数被叫做闭包。ES Module 模块化就是闭包。闭包可能带来内存泄露的问题。

6. 前端性能优化的手段有哪些？请从网络、渲染、JavaScript 执行等方面详细说明。

7. CSS 选择器的优先级是如何计算的？如何解决 CSS 命名冲突问题？

8. Webpack 和 Vite 的主要区别是什么？在什么场景下选择使用 Vite？

• 答：Webpack 和 Vite 的机制是不一样的，Vite 是基于浏览器原生 ES 模块的快速开发工具，并不做打包，只做开发环境的优化。所以他的启动速度更快，热更新更快速。

9. React 中如何实现状态管理？Context、Redux、Mobx 各有什么优缺点？

• 答：通过 Context 实现状态管理，Context 提供了 React 的状态管理机制，可以实现跨组件的状态共享。Context 的缺点是：性能开销较大，因为它需要在组件树中传递状态；状态管理不够直观，需要手动管理状态的更新和订阅。Redux 提供了更强大的状态管理和调试工具，适合大型应用。Mobx 提供了更轻量级的状态管理方式，适合中小型应用。

10. 谈谈你对微前端的理解，它解决了什么问题？常见的实现方式有哪些？

• 答：微前端是将前端应用拆分成多个小的前端应用，每个小的前端应用可以独立开发、部署和运行。微前端可以实现前端应用的模块化，提高开发效率和代码复用。

11. HTTP/1.1、HTTP/2 和 HTTP/3 有哪些主要区别？它们对前端性能有什么影响？

• 答：HTTP/1.1、HTTP/2 和 HTTP/3 的主要区别是：HTTP/1.1 是单路、单向、阻塞的；HTTP/2 是多路、双向、多路复用的；HTTP/3 是基于 QUIC 的，它提供了更低的延迟和更高的安全性。它们对前端性能的影响是：HTTP/1.1 的性能较差，HTTP/2 的性能较好，HTTP/3 的性能最好。