本文由 简悦 SimpRead 转码， 原文地址 zhuanlan.zhihu.com
这套题目总的来说，覆盖了广泛的领域，包含了许多经典问题，是前端面试过程中的高频问题，也是准备前端面试时必须要掌握的题目。
wx 公众号：大厂前端面试真题
1. 性能优化怎么做，单帧渲染时间和内存是如何计算的，直接看性能指标的？
Web 性能优化的关键点包括减少页面加载时间、提高渲染性能和节省内存消耗。常用：减少 HTTP 请求、延迟加载、缓存机制、压缩文件大小、使用 CDN 加速、优化图片、懒加载和预加载、减少重绘和重排等优化策略。
关于单帧渲染时间和内存计算，单帧渲染时间是指浏览器在一帧时间内完成页面渲染所需的时间，一般目标是保持在 16 毫秒以内，以保证流畅的动画效果。内存消耗是指页面加载和运行过程中所占用的内存大小，可以通过浏览器的开发者工具来监测。
直接查看性能指标是一种评估网页性能的方法，常用的性能指标包括页面加载时间（如首次渲染时间、DOMContentLoaded 事件触发时间）、资源加载时间、CPU 使用率、内存占用等。通过浏览器的开发者工具或性能分析工具可以获取这些指标，并根据指标来评估页面性能，并针对性地进行优化。
2. 权限模型是怎么设计的，前端如何限制，其他还有什么鉴权方式，cookie session？
权限模型设计包括用户角色管理和资源控制，前端通过路由拦截、条件渲染等方式限制权限，其它鉴权方式包括 JWT、OAuth 等，可使用 cookie、session 或 token 进行身份验证和权限控制。
3. jwt 的优缺点
JWT（JSON Web Token）的优点包括无状态、跨域支持、可扩展性强；缺点包括一旦签发无法撤回、携带信息量较大、需要额外保护避免被篡改。
4. flex：0 1 auto 分别代表什么？
flex: 0 1 auto 是flex-grow、flex-shrink和flex-basis的缩写，分别代表 flex 项的放大比例、缩小比例和初始大小。其中 flex-grow 指定项目在剩余空间中的放大比例，默认为 0；flex-shrink 指定项目在空间不足时的缩小比例，默认为 1；flex-basis 指定项目的初始大小，默认为 auto（根据项目内容自动计算）。
5. 浏览器是如何渲染一个 html 文件的？
浏览器渲染 HTML 文件的过程包括解析 HTML 文档构建 DOM 树、解析 CSS 样式构建 CSSOM 树、合并 DOM 树和 CSSOM 树形成 Render 树，然后进行布局（Layout）计算元素位置和大小，最后绘制（Paint）将元素转换为像素，再通过合成（Composite）将像素绘制到屏幕上。在这个过程中，浏览器会按照特定的规则处理脚本、样式表、图片和其他资源，并根据需要执行脚本和处理用户交互事件，实现页面的展示和交互功能。
wx 公众号：大厂前端面试真题
6. 浏览器的存储方式有哪些，有什么差异，用过 indexDB 吗？
浏览器的存储方式包括 Cookie、Web Storage（LocalStorage 和 SessionStorage）以及 IndexedDB。Cookie 是一小段文本信息，存储在用户的计算机上；Web Storage 使用键值对存储数据，包括 LocalStorage（长期存储）和 SessionStorage（会话期间存储）；IndexedDB 是一个基于 JavaScript 的高性能、事务型的数据库系统，可以存储大量结构化数据，并支持复杂的查询。
它们之间的主要差异：在于存储容量、数据结构、性能和功能灵活性。IndexedDB，它适合存储大量结构化数据并支持高级查询操作，但使用起来较为复杂。
7. css 加载会阻塞 dom 树的解析吗，会阻塞渲染吗？
CSS 加载会阻塞 DOM 树的解析，但不会阻塞渲染。当浏览器解析 HTML 文档时，遇到外部 CSS 文件引用或内嵌样式，浏览器会停止 DOM 树的构建，直到 CSS 文件加载完成，然后再继续构建 DOM 树。这是因为 CSS 样式可以影响 DOM 元素的布局和渲染，所以浏览器需要先获取 CSS 规则以正确计算渲染结果。但即使 CSS 文件尚未加载完成，浏览器也会继续解析 HTML 文档并显示内容，只是可能会出现没有样式的 "FOUC"（无样式内容闪烁）效果。
8. 讲一下浏览器的事件循环，如果在执行微任务的时候又产生了微任务，这个是在什么时候执行的？
浏览器的事件循环是一种机制，用于处理 JavaScript 代码中的任务队列。事件循环包括宏任务和微任务两个队列。当执行主线程中的代码时，遇到宏任务（如 setTimeout、setInterval 等）会被放入宏任务队列，而遇到微任务（如 Promise、MutationObserver 等）则会被放入微任务队列。
当执行一个宏任务结束后，在渲染之前，浏览器会检查微任务队列并依次执行其中的所有微任务。如果在执行微任务的过程中又产生了新的微任务，那么这些新的微任务会被添加到当前微任务队列的末尾，并在之后依次执行。
换句话说，当执行微任务的时候，如果产生了新的微任务，它们会在当前微任务队列的末尾排队等待执行，直到当前微任务队列为空才会结束。这样保证了微任务的执行优先级高于宏任务，且能够及时响应新产生的微任务。
9. 列举你知道的微任务和宏任务有哪些，process.nextTick 是什么时候执行的？
常见的微任务包括 Promise、MutationObserver、process.nextTick（Node.js 环境下）；而常见的宏任务包括 setTimeout、setInterval、requestAnimationFrame、I/O 操作、事件回调等。
process.nextTick 是 Node.js 中的一个特殊的微任务。它会在当前阶段结束后、下一个阶段开始前执行，即在事件循环的每个阶段之间。具体来说，它会在每次 I/O 事件的回调执行完毕后、事件循环进入下一个阶段之前执行。这使得 process.nextTick 的优先级高于其他微任务，可以立即执行，常被用于确保某些操作在下一个阶段之前执行，避免出现竞争条件或异步回调的延迟。
10. node 事件循环的 6 个阶段
- Timer 阶段：处理定时器回调函数。
- I/O callbacks 阶段：处理几乎所有的异步 I/O 回调函数，如网络请求、文件操作等。
- Idle, prepare 阶段：仅供内部使用。
- Poll 阶段：等待新的 I/O 事件，执行与 I/O 相关的回调函数。
- Check 阶段：执行
setImmediate()注册的回调函数。 - Close callbacks 阶段：处理关闭的回调函数，例如
socket.on('close', ...)。
wx 公众号：大厂前端面试真题
11. 为什么需要有微任务这个概念，可以从执行时机方面考虑？
微任务的引入是为了解决事件循环中执行时机的问题，确保异步操作的回调函数在宏任务执行完毕前得以执行，提高响应性能和用户体验。微任务在主线程空闲时执行，避免阻塞和提高页面渲染流畅度，同时提供更细粒度的控制代码执行顺序。
12. 网络请求 xhr 是什么任务？
网络请求（XMLHttpRequest）是一种异步任务，通常在浏览器中使用。它允许客户端向服务器发送请求并在不刷新页面的情况下接收响应。当执行 XMLHttpRequest 时，浏览器会创建一个异步 HTTP 请求，并在请求成功或失败时调用相应的回调函数。由于 XMLHttpRequest 是异步任务，因此它可以在等待服务器响应时不阻塞主线程，从而提高了页面的性能和用户体验。
13. promise.all 和 promise. race，如何处理报错？
在 Promise.all 中，如果任何一个 Promise 被 reject（即出现错误），整个 Promise.all 就会被 reject，并返回该错误。而在 Promise.race 中，只要有一个 Promise settled（无论是 resolve 还是 reject），整个 Promise.race 就会 settled，并返回这个 Promise 的结果或错误。
14. promise.race 是什么？
Promise.race是一个Promise方法，接受一个Promise对象组成的数组作为参数。它返回一个新的Promise，当参数中的任意一个Promise对象解决（settled）时，新的Promise也将解决，并获得第一个解决的Promise的值或错误作为结果。
15. promise.all 如何实现所有的执行完再返回？
Promise.all是一个Promise方法，接受一个Promise对象组成的数组作为参数。它返回一个新的Promise，当参数中的所有Promise对象都成功解决时，新的Promise也将成功解决，并返回所有Promise对象的结果组成的数组作为结果。Promise.all通过在内部创建一个计数器来实现等待所有Promise对象执行完成。每当一个Promise对象解决后，计数器减一，直到所有的Promise对象都成功解决为止，Promise.all才会返回所有Promise对象的结果组成的数组。如果其中任何一个Promise对象失败，则Promise.all立即失败并返回该错误。
wx 公众号：大厂前端面试真题
16. new 的过程中做了什么，和构造函数有什么关联？
在使用new关键字创建对象时，首先会创建一个新的空对象，然后将这个空对象作为this关键字绑定到构造函数上。接着执行构造函数内部的代码，对新对象进行初始化操作。最后，如果构造函数没有显式返回其他对象，就会隐式返回这个新对象。
因此，new的过程与构造函数紧密相关，它通过构造函数来初始化并返回一个新对象，从而实现了对象的创建和初始化。
17. 讲一下原型和原型链
每个 JavaScript 对象都有一个原型（prototype），原型又是一个对象。当试图访问一个对象的属性时，如果该对象没有这个属性，JavaScript 引擎会沿着原型链向上查找直到找到相应的属性或者到达原型链的末尾（通常是 Object.prototype）。
原型链是由对象之间的原型关系构成的，它允许对象继承另一个对象的属性。当我们访问一个对象的属性时，如果对象本身没有这个属性，JavaScript 引擎会去它的原型对象中查找，如果还没有，就会顺着原型链一直向上查找，直到找到对应的属性或者到达原型链的末尾。
18. 用过 ts 吗，讲一下泛型？
在 TypeScript 中，泛型（Generics）允许我们在定义函数、类或接口时使用参数化类型。通过使用泛型，我们可以编写可重用的代码，以适应不同类型的数据。
泛型可以用于函数参数、函数返回值和类成员的类型注解。通过在尖括号<>中指定泛型参数，可以创建泛型函数或泛型类。泛型参数允许我们在使用函数或类时指定具体的类型，从而提供类型安全和灵活性。
例如，function identity<T>(arg: T): T是一个泛型函数，它接受一个参数并返回相同类型的值。可以使用identity<number>(5)来指定参数类型为number，或者直接调用identity(5)，让 TypeScript 根据参数推断出类型。这样，可以在不同的上下文中使用同一个泛型函数来处理不同类型的数据。
19. 为什么用 vue 可以直接用 http://this.xxx 来赋值，而 react 不行？
这是因为 Vue 和 React 在处理组件的方式上有所不同。
在 Vue 中，组件的方法默认绑定到组件实例上，因此可以直接通过this.xxx来访问组件实例的属性或方法。
而 React 中，默认情况下，组件的方法并没有绑定到组件实例上，因此无法直接通过this.xxx来访问组件实例的属性或方法。需要使用箭头函数、显式绑定或者将方法定义为类属性的方式来确保方法内部的this指向组件实例。
20. 为什么 react 要使用 setState 显式的设置值？
在 React 中，使用setState来显式设置组件的状态值，是为了确保状态的一致性和可控性。React 将组件的状态视为不可直接修改的，而是通过setState方法进行更新。
通过使用setState，React 可以进行状态的批量更新和合并，并且会触发组件的重新渲染，以反映最新的状态。此外，setState还提供了一些优化机制，比如批量更新和异步更新，以提高性能和减少不必要的渲染。
通过明确使用setState来设置状态，React 可以更好地管理组件的生命周期和渲染过程，并提供更可靠的状态管理机制。
wx 公众号：大厂前端面试真题
21. hooks 为什么不能在循环或条件语句中执行？
React hooks 不能在循环或条件语句中执行，因为 React 需要依赖 hooks 的调用顺序来正确地管理组件的状态。将 hooks 放在循环或条件语句中可能导致 hooks 调用顺序发生变化，从而造成状态管理混乱和错误。为了确保 hooks 的稳定调用顺序，React 规定 hooks 只能在函数组件的最顶层进行调用。
22. express 和 koa 有什么区别，中间件执行方面？
在中间件执行方面，Express 使用基于回调函数的中间件机制，一个中间件函数处理请求后可以通过调用next()将控制权传递给下一个中间件。这种方式简单直观，但在处理异步操作时可能需要额外的工作。
而 Koa 使用基于 Promise 的中间件机制，在中间件函数内部可以使用await来处理异步操作，可以更方便地编写和处理异步代码。此外，Koa 的中间件机制也更加轻量级和易于扩展。
Koa 在中间件执行方面更加现代化和灵活，而 Express 则更加传统和简单。
23. 题 3：大数相加
在 JavaScript 中，可以使用第三方库如 BigInt.js 或 BigNumber.js 来处理大数相加。这些库提供了高精度计算的功能，可以直接对大数进行相加操作，避免了 JavaScript 数字类型的精度限制。例如，使用 BigInt.js 库可以通过 BigInt 对象进行大数相加：BigInt(num1).plus(BigInt(num2)).toString()。
24. 题 4：实现一个 eventBus（发布订阅）
点击下方，阅读原文，查看详细答案
25. 题 5：封装 hooks
点击下方，阅读原文，查看详细答案
wx 公众号：大厂前端面试真题