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

前端面试高频题库整理

场景题

1. 怎么在前端页面中添加水印？
2. 如何封装一个请求，让其多次调用的时候，实际只发起一个请求时返回同一份结果？
3. Web 网页如何禁止别人移除水印？
4. React 中怎么实现下拉菜单场景，要求点击区域外能关闭下拉组件？
5. React 如何实现 Vue 中 keep-alive 的功能？
6. 如何监控前端页面的崩溃？
7. 如何搭建一套灰度系统？
8. 如何在前端团队快速落地代码规范？
9. 前端如何实现即时通讯？
10. 用户访问页面白屏了，原因是啥，如何排查？
11. 如何给自己团队的大型前端项目设计单元测试？
12. 如何做一个前端项目工程的自动化部署，有哪些规范和流程设计？
13. 你参与过哪些前端基建方面的建设？
14. 假如让你负责一个商城系统的开发，现在需要统计商品的点击量，你有什么样的设计与...?
15. 前端怎么做错误监控？
16. Token 过期后，页面如何实现无感刷新？
17. 如何解决页面请求接口大规模并发问题？
18. Web 应用中如何对静态资源加载失败的场景做降级处理？
19. 什么是单点登录，以及如何进行实现？
20. SPA 首屏加载速度慢的怎么解决？
21. 站点一键换肤的实现方式有哪些？
22. 实现 table header 吸顶，有哪些实现方式？
23. 怎么实现扫码登录？
24. 如果用户说 web 应用感觉很反应慢或者卡顿，该如何排查？
25. 如何设计一套统计全站请求耗时的工具？
26. 你是怎么理解前端架构的？
27. 怎么分析页面加载慢的原因？
28. 为什么在技术选型中选择了 webpack？
29. 如果想在小程序中嵌入 markdown 的文档，你有什么思路？
30. 前端如何实现截图？
31. 如何标准化处理线上用户反馈的问题？
32. px 如何转为 rem？
33. 浏览器有同源策略，但是为何 CDN 请求资源的时候不会有跨域限制？
34. Cookie 可以实现不同域共享吗？
35. Axios 是否可以取消请求？
36. 前端如何实现折叠面板效果？
37. DOM 里面，如何判定 a 元素是否是 b 元素的子元素？
38. 判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。该如何判定？
39. Is 如何判空？「空」包含了：空数组、空对象、空字符串、0、undefined、null、空 map、空 set 都属于为空的数据。
40. CSS 实现翻牌效果。
41. Flex:1 代表什么？
42. 一般是怎么做代码重构的？
43. 如何清理源码里面没有被应用的代码，主要是 JS、TS、CSS 代码？
44. 前端应用如何做国际化？
45. 应用如何做应用灰度发布？
46. 微前端为何通常在微前端应用隔离，不选择 iframe 方案？
47. Qiankun 是如何做 JS 隔离的？
48. 微前端架构一般是如何做 JavaScript 隔离？
49. React 循环渲染中为什么推荐不用 index 做 key？
50. React 如何避免使用 context 的时候，引起整个挂载节点树的重新渲染？
51. 当 QPS 达到峰值时，该如何处理？
52. JS 超过 Number 最大值的数怎么处理？
53. 使用同一个链接，如何实现 PC 打开是 web 应用、手机打开是一个 H5 应用？【腾讯二面】
54. 如何保证用户的使用体验？【字节一面】
55. 如何解决页面请求接口大规模并发问题？【必会】
56. 设计一套全站请求耗时统计工具？
57. 大文件上传了解多少？【百度一面】
58. H5 如何解决移动端适配问题？【美团一面】
59. 站点一键换肤的实现方式有哪些？【美团一面】
60. 如何实现网页加载进度条？【百度一面】
61. 常见图片懒加载方式有哪些？【京东一面】
62. Cookie 构成部分有哪些？【百度一面】
63. 扫码登录实现方式？【腾讯一面】
64. DNS 协议了解多少？【字节一面】
65. 函数式编程了解多少？【京东一面】
66. 前端水印了解多少？【腾讯一面】
67. 什么是领域模型？【必会】
68. 一直在 window 上面挂东西是否有什么风险？【百度一面】
69. 深度 SEO 优化的方式有哪些，从技术层面来说？
70. 小程序为什么会有两个线程？【腾讯一面】
71. Web 应用中如何对静态资源加载失败的场景做降级处理？
72. HTML 中前缀为 data-开头的元素属性是什么？
73. 移动端如何实现上拉加载，下拉刷新？【字节一面】
74. 如何判断 DOM 元素是否在可视区域？【字节一面】
75. 前端如何用 canvas 来做电影院选票功能？【美团一面】
76. 如何通过设置失效时间清除本地存储的数据？【腾讯二面】
77. 如果不使用脚手架，如果用 webpack 构建一个自己的 react 应用？
78. 用 nodejs 实现一个命令行工具，统计输入目录下面指定代码的行数？
79. Packagejson 里面 sideEffects 列性的作用是啥？【必会】
80. Script 标签上有那些属性，分别作用是啥？【必会】
81. 为什么 SPA 应用都会提供一个 hash 路由，好处是什么？
82. React 如何进行路由变化监听？【字节一面】
83. 单点登录是是什么，具体流程是什么？【腾讯一面】
84. Web 网页如何禁止别人移除水印？【百度一面】
85. 用户访问页面白屏了，原因是啥，如何排查？
86. 代码实现：S 中如何实现大对象深度对比？
87. 如何理解数据驱动视图，有哪些核心要素？【腾讯二面】
88. Vue-cli 都做了哪些事儿，有哪些功能？
89. JS 执行 100 万个任务，如何保证浏览器不卡顿？【百度一面】
90. JS 放在 head 里和放在 body 里有什么区别？
91. Eslint 代码检查的过程是啥？【必会】
92. 虚拟滚动加载原理是什么，用 JS 代码简单实现一个虚拟滚动加加载？
93. React-router 和原生路由区别？
94. HTML 的行内元素和块级元素的区别？【京东一面】
95. 介绍一下 requestIdleCallback API？
96. DocumentFragment API 是什么，有哪些使用场景？【必会】
97. Git pull 和 git fetch 有啥区别？
98. 前端如何做页面主题色切换？【腾讯一面】
99. 前端视角 - 如何保证系统稳定性？【字节一面】
100. 如何统计长任务时间、长任务执行次数？【腾讯二面】
101. V8 里面的 JT 是什么？【京东一面】
102. 用 Js 写一个 cookies 解析函数，输出结果为一个对象？
103. Vue 中 Scoped Styles 是如何实现样式隔离的，原理是啥？
104. 样式隔离方式有哪些？【字节一面】
105. 在 JS 中，如何解决递归导致栈溢出问题？
106. 站点如何防止爬虫？【百度一面】
107. TS 项目中，如何使用 nodemodules 里面定义的全局类型包到自己项目 src 下面使用？【百度二面】
108. 不同标签页或窗口间的主动推送消息机制的方式有哪些？（不借助服务端）
109. React 在 react 项目开发过程中，是否可以不用 react router 使用浏览器原生 history 路由来组织页面路由？
110. 在表单校验场景中，如何实现页面视口滚动到报错的位置？
111. 如何一次性渲染十万条数据还能保证页面不卡顿？【百度二面】
112. Webpack 打包时 hash 码是如何生成的？【必会】
113. 如何从 0 到 1 搭建前端基建？【京东一面】
114. 你在开发过程中，使用过哪些 TS 的特性或者能力？【美团一面】
115. 浏览器对队头阻塞有什么优化？【百度一面】
116. Webpack 项目中通过 script 标签引入资源，在项目中如何处理？
117. 应用上线后，怎么通知用户刷新当前页面？【腾讯一面】
118. Eslint 代码检查的过程是啥？
119. HTTP 是一个无状态的协议，那么 Web 应用要怎么保持用户的登录态呢？
120. 如何检测网页空闲状态（一定时间内无操作）？【百度二面】
121. 为什么 Vite 速度比 Webpack 快？
122. 列表分页，快速翻页下的竞态问题？【百度二面】
123. JS 执行 100 万个任务，如何保证浏览器不卡顿？
124. Git 仓库迁移应该怎么操作？
125. 如何禁止别人调试自己的前端页面代码？【字节二面】
126. Web 系统里面，如何对图片进行优化？【必会】
127. OAuth2.0 是什么登录方式？
128. 单点登录是如何实现的？
129. 常见的登录鉴权方式有哪些？
130. 需要在跨域请求中携带另外一个域名下的 Cookie 该如何操作？
131. Vite 和 Webpack 在热更新上有啥区别？
132. 封装一个请求超时，发起重试的代码？
133. 前端如何设置请求超时时间 timeout？【必会】
134. Nodejs 如何充分利用多核 CPU？【字节二面】
135. 后端一次性返回树形结构数据，数据量非常大前端该如何处理？
136. 你认为组件封装的一些基本准则是什么？
137. 页面加载速度提升 (性能优化) 应该从哪些方向来思考？
138. 前端日志埋点 SDK 设计思路？
139. Token 进行身份验证了解多少？【腾讯一面】
140. 在前端应用如何进行权限设计？【字节二面】
141. 低代码平台一般底层是如何设计的？
142. 低代码平台一般底层协议是怎么设计的？
143. Webpack 有哪些优化项目的手段？
144. IndexedDB 存储空间大小是如何约束的？
145. 浏览器的存储有哪些？【腾讯一面】
146. Webpack 如何打包运行时 chunk，且在项目工程中如何去加载这个运行时 chunk？
147. 为何现在市面上做表格渲染可视化技术的，大多数都是 canvas，而很少用 svg 的？
148. 在你的项目中，使用过哪些 webpack plugin，说一下他们的作用？
149. 在你的项目中，使用过哪些 webpack loader，说一下他们的作用？
150. React 如何避免不必要的渲染？【美团一面】
151. 全局样式命名冲突和样式覆盖问题怎么解决？
152. React 如何实现专场动画？
153. React 层面上，能做的性能优化有哪些？
154. Vue 中为何不要把 v-if 和 v-for 同时用在同一个元素上，原理是什么？
155. 将静态资源缓存在本地的方式有哪些？
156. SPA 首屏加载速度慢的怎么解决？
157. Axios 是如何区分是 nodejs 环境还是浏览器环境的？
158. 如何拦截 web 应用的请求？

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. 衡量页面性能的指标有哪些？