今年因为找工作比较顺利，没有面很多的前端岗位，大概有小米和字节去转了转，偶然也是认识了一个师兄，能在字节这个地方做前端，实力相信不用多说，因为频繁交流也是得到了很多对面试有帮助的资源。

今天大概整理完了，根据我和身边朋友今年的面经整理出了3-6年经验面试出现率较高的面试题，还有字节师兄给的面试资源也整合了出来，就算今年不打算参加面试，明年你们一定会用得到的。

废话不多说，以上整理内容涵盖：

JavaScript、HTML、css、react、vue、TS、工程化、设计模式、小程序、性能优化、场景题、项目细节、项目难点亮点、低代码、算法、node、ES6等等

丸整可以

https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material5

首先今年的场景题部分（展示部分题，丸整太长）

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.如何标准化处理线上用户反馈的问题【热度：631】

32.px 如何转为rem【热度：545】

33.浏览器有同源策略，但是为何cdn请求资源的时候不会有跨域限制【热度：579】

34.cookie可以实现不同域共享吗【热度：533】

35.axios是否可以取消请求【热度：532】

36.前端如何实现折叠面板效果？

37.dom里面，如何判定a元素是否是b元素的子元素【热度：400】

38.判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。该如何判定？

39.is如何判空？「空」包含了：空数组、空对象、空字符串、0、undefined、null、空map、空set都属于为空的数据【热度:640】

40.css 实现翻牌效果【热度：116】

41.flex:1代表什么【热度：400】

42.一般是怎么做代码重构的

43.如何清理源码里面没有被应用的代码，主要是JS、TS.CSS代码【热度：329】

44.前端应用如何做国际化？【热度：199】

45.应用如何做应用灰度发布【热度:247】

46.「微前端]为何通常在微前端应用隔离，不选择iframe方案【热度：280】

47.[微前端]Qiankun是如何做Js隔离的【热度：228】

48.[微前端]微前端架构一般是如何做JavaScript隔离

49.[React]循环渲染中为什么推荐不用index 做key【热度:320】

50.[React]如何避免使用context 的时候，引起整个挂载节点树的重新渲染【热度：420】

51.前端如何实现截图？

52.当QPS达到峰值时，该如何处理？

53.js超过Number最大值的数怎么处理？

54.使用同一个链接，如何实现PC打开是web应用、手机打开是-个H5应用？【腾讯二面】

55.如何保证用户的使用体验【字节一面】

56.如何解决页面请求接口大规模并发问题【必会】

57.设计一套全站请求耗时统计工具

58.大文件上传了解多少【百度一面】

59.H5如何解决移动端适配问题【美团一面】

60.站点一键换肤的实现方式有哪些？【美团一面】

61.如何实现网页加载进度条？【百度一面】

62.常见图片懒加载方式有哪些？【京东一面】

63.cookie构成部分有哪些【百度一面】

64.扫码登录实现方式【腾讯一面]

65.DNS协议了解多少【字节一面】

66.函数式编程了解多少？【京东一面】

67.前端水印了解多少？【腾讯一面】

68.什么是领域模型【必会】

69.一直在window上面挂东西是否有什么风险【百度一面】

70.深度SEO优化的方式有哪些，从技术层面来说

71.小程序为什么会有两个线程【腾讯一面】

72.web应用中如何对静态资源加载失败的场景做降级处理

73.html中前缀为data-开头的元素属性是什么？

74.移动端如何实现上拉加载，下拉刷新？【字节一面】

75.如何判断dom元素是否在可视区域【字节一面】

76.前端如何用canvas来做电影院选票功能【美团一面】

77.如何通过设置失效时间清除本地存储的数据？【腾讯二面】

78.如果不使用脚手架，如果用webpack构建一个自己的react应用

79.用nodejs实现一个命令行工具，统计输入目录下面指定代码的行数

80.packagejson里面sideEffects列性的作用是啥【必会】

81.script标签上有那些厘性，分别作用是啥？【必会】

82.为什么SPA应用都会提供一个hash路由，好处是什么？

83.[React]如何进行路由变化监听【字节一面】

84.单点登录是是什么，具体流程是什么【腾讯一面】

85.web网页如何禁止别人移除水印【百度一面】

86.用户访问页面白屏了，原因是啥，如何排查？

87.[代码实现]s中如何实现大对象深度对比

88.如何理解数据驱动视图，有哪些核心要素？【腾讯二面】

89.vue-cli都做了哪些事儿，有哪些功能？

90.JS执行100万个任务，如何保证浏览器不卡顿？【百度一面】

91.JS放在head里和放在body里有什么区别？

92.Eslint代码检查的过程是啥？【必会】

93.虚拟混动加载原理是什么，用JS代码简单实现一个虚拟滚动加加载

94.[React]react-router和原生路由区别

95.html的行内元素和块级元素的区别【京东一面】

96.介绍-下 requestlIdleCallback api

97.documentFragment api是什么，有哪些使用场景？【必会】

98. git pull和 git fetch 有啥区别?

99.前端如何做页面主题色切换【腾讯一面】

100.前端视角-如何保证系统稳定性【字节一面]

101.如何统计长任务时间、长任务执行次数【腾讯二面】

102.V8里面的JT是什么？【京东一面]

103.用Js写一个cookies解析函数，输出结果为一个对象

104.vue 中 Scoped Styles是如何实现样式隔离的，原理是啥

105.样式阿商方式有哪些【字节一面】

106.在JS中，如何解决递归导致栈溢出问题？

107.站点如何防止爬虫？【百度一面】

108.ts项目中，如何使用nodemodules里面定义的全局类型包到自己项目src下面使用？【百度二面】

109.不同标签页或窗口间的【主动推送消息机制】的方式有哪些？（不借助服务端）

110.[React】在react项目开发过程中，是否可以不用react router使用浏览器原生history路由来组织页面路由？

111在表单校验场景中，如何实现页面视口滚动到报错的位置

112,如何一次性渲染十万条数据还能保证页面不卡顿【百度二面】

113.【webpack】打包时hash码是如何生成的【必会】

114.如何从0到1搭建前端基建【京东一面】

115.你在开发过程中，使用过哪些TS的特性或者能力？【美团一面】

117.浏览器对队头阻寒有什么优化？【百度一面）

118.Webpack项目中通过script标签引入资源，在项目中如何处理？

119.应用上线后，怎么通知用户刷新当前页面？【腾讯一面】

120.Eslint代码检查的过程是啥？

121.HTTP是一个无状态的协议，那么Web应用要怎么保持用户的登录态呢？

122.如何检测网页空闲状态（一定时间内无操作）【百度二面】

123.为什么Vite速度比Webpack快?

124.列表分页，快速翻页下的竞态问题【百度二面】

125.JS执行100万个任务，如何保证浏览器不卡顿？

126.git仓库迁移应该怎么操作

127.如何禁止别人调试自己的前端页面代码？【字节二面】

128.web系统里面，如何对图片进行优化？【必会】

129.0Auth2.0是什么登录方式

130.单点登录是如何实现的？

131.常见的登录鉴权方式有哪些？

132.需要在跨域请求中携带另外一个域名下的Cookie该如何操作？

133.vite和webpack 在热更新上有啥区别?

134.封装一个请求超时，发起重试的代码

135.前端如何设置请求超时时间timeout【必会】

136.nodejs 如何充分利用多核CPU?【字节二面】

137.后端一次性返回树形结构数据，数据量非常大前端该如何处理？

138.你认为组件封装的一些基本准则是什么？

139.页面加载速度提升(性能优化)应该从哪些反向来思考？

140.前端日志埋点SDK设计思路

141.token进行身份验证了解多少？【腾讯一面】

142.在前端应用如何进行权限设计？【字节二面】

143.【低代码】代码平台一般泊染是如何设计的？

144.【低代码】代码平台一般底层协议是怎么设计的

145.[Webpack】有哪些优化项目的手段？

146.IndexedDB存储空间大小是如何约束的?

147.浏览器的存储有哪些【腾讯一面】

148.[Webpack】如何打包运行时chunk，且在项自工程中如何去加载这个运行时chunk？

149.为何现在市面上做表格泊染可视化技术的，大多数都是canvas，而很少用svg的?

150.在你的项目中，使用过哪些webpack plugin,说一下他们的作用

151.在你的项目中，使用过哪些webpackloader,说一下他们的作用

152.【React】如何避免不必要的染？【美团一面】

153.全局样式命名冲突和样式盖问题怎么解决？

154.【React】如何实现专场动画？

155.【React】从React层面上，能做的性能优化有哪些?

156.[VUE】中为何不要把v-f和v-for同时用在同一个元素上，原理是什么？

157.将静态资源缓存在本地的方式有哪些？

158.SPA首屏加载速度慢的怎么解决

159.axios是如何区分是nodejs环境还是浏览器环境的?

160.如何拦截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. 如何让 useEfect 支持 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. 衡量页面性能的指标有哪些？

https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material5

以上就是今天的部分内容，含完整的刷题网站，只需要面试前根据自己掌握的情况查漏补缺即可。