前端面试高频题库整理（JavaScript/React/Vue/工程化等）

JavaScript 面试题

1. 相比于 npm 和 yarn，pnpm 的优势是什么？
2. 如果使用 Math.random() 计算中奖概率会有什么问题吗？
3. 怎么使用 js 实现拖拽功能？
4. 举例说明你对尾递归的理解，以及有哪些应用场景？
5. 说说你对 Iterator, Generator 和 Async/Await 的理解？
6. 说说你对模块化方案的理解，比如 CommonJS、AMD、CMD、ES Module...
7. 前端跨页面通信，你知道哪些方法？
8. JavaScript 脚本延迟加载的方式有哪些？
9. 怎么理解 ES6 中 Generator 的？使用场景有哪些？
10. 导致页面加载白屏时间长的原因有哪些，怎么进行优化？
11. 微前端中的应用隔离是什么，一般是怎么实现的？
12. JavaScript 对象的底层数据结构是什么？
13. 浏览器和 Node 中的事件循环有什么区别？
14. 版本号排序？
15. 哪些原因会导致 js 里 this 指向混乱？
16. 怎么实现大型文件上传？
17. 说说你的 ES6-ES12 的了解？
18. Promise 的 finally 怎么实现的？
19. 怎么使用 js 动态生成海报？
20. 异步编程有哪些实现方式？

React.js 面试题

1. Fiber 架构的工作原理？
2. React Reconciler 为何要采用 fiber 架构？
3. useState 是如何实现的？
4. React Fiber 是什么？
5. 简单介绍下 React 中的 diff 算法？
6. 如何让 useEffect 支持 async/await？
7. React 中怎么实现状态自动保存 (KeepAlive)？
8. ReactFiber 是如何实现更新过程可控？
9. React 中懒加载的实现原理是什么？
10. React 有哪些性能优化的方法？
11. 不同版本的 React 都做过哪些优化？
12. React18 新特性？
13. 说说你对 ReactHook 的闭包陷阱的理解，有哪些解决方案？
14. React 中，怎么给 children 添加额外的属性？
15. Fiber 为什么是 React 性能的一个飞跃？
16. React 是否支持给标签设置自定义的属性，比如给 video 标签设置 webkit-playsinline？
17. 说说 React render 阶段的执行过程？
18. React 中，fiber 是如何实现时间切片的？
19. React 中为什么不直接使用 requestIdleCallback？
20. 说说 React commit 阶段的执行过程？

Vue.js 面试题

1. Vue 模板是如何编译的？
2. Vue3 相比较于 vue2，在编译阶段有哪些改进？
3. 说说 Vue 页面渲染流程？
4. Vue 项目中，你做过哪些性能优化？
5. 如果使用 Vue3.0 实现一个 Modal，你会怎么进行设计？
6. Vue3.0 里为什么要用 ProxyAPI 替代 defineProperty API？
7. Vue 有了数据响应式，为何还要 diff？
8. 说说 vue3 中的响应式设计原理？
9. 说说 Vue 中 CSS scoped 的原理？
10. Vue3 的响应式库是独立出来的，如果单独使用是什么样的效果？
11. 手写 vue 的双向绑定？
12. 什么是虚拟 DOM？如何实现一个虚拟 DOM？说说你的思路？
13. SSR 是什么？Vue 中怎么实现？
14. 说下 Vite 的原理？
15. Vue2.0 为什么不能检查数组的变化，该怎么解决？
16. React 和 Vue 在技术层面有哪些区别？
17. 说说 vue 中，key 的原理？
18. 谈谈 Vue 事件机制，并手写$on、$off、$emit、$once？
19. Vue 文件中，在 v-for 时给每项元素绑定事件需要用事件代理吗，为什么？
20. Vue 中，created 和 mounted 两个钩子之间调用时间差值受什么影响？

TypeScript 面试题

1. 如何检查 TypeScript 中的 null 和 undefined？
2. 如何将 unknown 类型指定为一个更具体的类型？
3. Typescript 中什么是类类型接口？
4. 说说你对 typescript 的理解？与 javascript 的区别？
5. 什么是 TypeScript Declare 关键字？
6. In 运算符作用是什么？
7. 纯 TS 项目工程中，如何使用 alias path？
8. 使用 TS 实现一个判断传入参数是否是数组类型的方法？
9. TypeScript 中的 getter/setter 是什么？你如何使用它们？
10. Unknown 是什么类型？
11. Never 是什么类型，详细讲一下？
12. Extends 条件类型怎么定义？
13. 如何在 TypeScript 中实现继承？
14. 说一说 TypeScript 中的类及其特性？
15. 请实现下面的 sleep 方法？
16. TypeScript 中的方法重写是什么？
17. Tsconfig.json 文件有什么用？
18. Typescript 中 never 和 void 的区别？
19. Typescript 中的 is 关键字有什么用？
20. TypeScript 中的类是什么？你如何定义它们？

Webpack 面试题

1. Webpack 中 module、chunk、bundle 的区别是什么？
2. 说说你对前端工程化的理解？
3. Webpack loader 和 plugin 实现原理？
4. 为什么 webpack 可以通过文件打包，让浏览器可以支持 CommonJs 规范？
5. Webpack tree-shaking 在什么情况下会失效？
6. 微前端中的路由加载流程是怎么样的？
7. 说下 Vite 的原理？
8. 说说 webpack 的构建流程？
9. 说说你对 Source Map 的了解？
10. ES6 代码转成 ES5 代码的实现思路是什么？
11. Webpack 的 module、bundle、chunk 分别指的是什么？
12. 浏览器是否支持 CommonJs 规范？
13. Webpack treeShaking 机制的原理是什么？
14. Package.json 里面 sideEffects 属性的作用是什么？
15. 什么情况下会导致 webpack treeShaking 失效？
16. 为什么 SPA 应用都会提供一个 hash 路由，好处是什么？
17. Webpack 分包的方式有哪些？
18. Babel 的工作流程是怎么样的？
19. Npm script 了解多少？
20. 前后端分离是什么？

性能优化 面试题

1. 怎么统计页面的性能指标？
2. 导致页面加载白屏时间长的原因有哪些，怎么进行优化？
3. Service Worker 是如何缓存 http 请求资源的？
4. 如何优化 DOM 树解析过程？
5. DNS 预解析是什么？怎么实现？
6. 虚拟 DOM 一定更快吗？
7. 如果某个页面有几百个函数需要执行，可以怎么优化页面的性能？
8. React.memo() 和 useMemo() 的用法是什么，有哪些区别？
9. SPA 首屏加载速度慢的怎么解决？
10. 在 React 中可以做哪些性能优化？
11. 前端性能优化指标有哪些？怎么进行性能检测？
12. 怎么进行站点内的图片性能优化？
13. 什么是内存泄漏？什么原因会导致呢？
14. 浏览器为什么要请求并发数限制？
15. CSS 加载会造成阻塞吗？
16. 以用户为中心的前端性能指标有哪些？
17. 有些框架不用虚拟 dom，但是他们的性能也不错是为什么？
18. 谈谈对 window.requestAnimationFrame 的理解？
19. 页面加载的过程中，JS 文件是不是一定会阻塞 DOM 和 CSSOM 的构建？
20. 衡量页面性能的指标有哪些？