11月3-5年Web前端开发面试需要达到的强度
3-5年前端面试强度很高，重在深度和项目结合。
JavaScript与异步编程：不止会用，要懂底层。如 Event Loop
运行机制、
V8内存管理，
Promise实现原理及微任务宏任务调度。
框架原理：深入
React Hooks底层实现、
Virtual DOM diff策略。Vue3响应式原理和编译优化必问。
工程化与性能：必须掌握
Webpack 构建流程、Tree-shaking
原理，并能结合实际案例实现首屏加载优化、内存泄漏排查。
浏览器与网络：精通浏览器渲染流程、Composite原理。
HTTP2/3特性、缓存策略及CDN优化方案。
跨端与新技术：掌握小程序底层双线程架构、
React Native渲染原理。
微前端方案落地实践及性能监控体系搭建。
关键：
别堆砌技术名词，要能说清在项目中如何用这些技术解决体验优化、渲染性能等实际需求，并讲透技术选型背后的权衡逻辑。
以下面试题：
JavaScript篇
Q1、不会冒泡的事件有哪些?
Q2、mouseEnter 和 mouseOver 有什么区别?
Q3、MessageChannel 是什么，有什么使用场景?
Q4、async、await 实现原理
Q5、Proxy 能够监听到对象中的对象的引用吗?
Q6、如何让 var [a, b]={a:1,b: 2}解构赋值成功?
Q7、下面代码会输出什么?
Q8、描述下列代码的执行结果
Q9、什么是作用域链?
Q10、bind、call、apply 有什么区别?如何实现一个bind?
React篇
Q11、下面代码中，点击“+3”按钮后，age 的值是什么?
Q12、React Portals 有什么用?
Q13、react 和 react-dom 是什么关系?
Q14、React 中为什么不直接使用 requestIdleCallback?
Q15、为什么 react 需要 fiber 架构，而 Vue却不需要?
Q16、子组件是一个 Portal，发生点击事件能冒泡到父组件吗？
Q17、说说React render方法的原理?在什么时候会被触发?
Vue篇
Q18、 Vue 有了数据响应式，为何还要 diff ?
Q19、vue3 为什么不需要时间分片?
Q20、vue3 为什么要引入
Composition API ?
Q21、谈谈 Vue 事件机制，并手写$on、$off、$emit、$once
Q22、computed 计算值为什么还可以依赖另外一个 computed 计算值?
Q23、怎么在 Vue 中定义全局方法?
计算机网络篇
Q24、简单描述从输入网址到页面显示的过程
Q25、说说WebSocket和HTTP的区别
Q26、说说 https 的握手过程
Q27、HTTP2中，多路复用的原理是什么?
TypeScript篇
Q28、说说对 TypeScript 中命名空间与模块的理解?区别?
Q29、说说你对 typescript 的理解?与 javascript 的区别?
Q30、Typescript中泛型是什么?
Q31、TypeScript中有哪些声明变量的方式?
Q32、什么是Typescript的方法重载?
Q33、请实现下面的 sleep 方法
Q34、typescript 中的 is 关键字有什么用?
Q35、TypeScript支持的访问修饰符有哪些?
Q36、请实现下面的 myMap 方法
Q37、请实现下面的 treePath 方法
Q38、请实现下面的 produat 方法
Node.js篇
Q39、common.js
和
es6中模块引入的区别?
Q40、为什么Node在使用es module时必须加上文件扩展名?
Q41、浏览器和 Node 中的事件循环有什么区别?
Q42、Node性能如何进行监控以及优化?
Q43、如果让你来设计一个分页功能,你会怎么设计?前后端如何交互?
Q44、如何实现文件上传?说说你的思路
Q45、如何实现iwt鉴权机制?说说你的思路
Q46、说说对中间件概念的理解，如何封装 node 中间件?
Q47、说说 Node 文件査找的优先级以及 Require 方法的文件查找策略?
Q48、说说对Nodejs中的事件循环机制理解?
性能优化篇
Q49、script标签放在header里和放在body底部里有什么区别?
Q50、前端性能优化指标有哪些?怎么进行性能检测?
Q51、SPA(单页应用)首屏加载速度慢怎么解决?
Q52、如果使用CSS提高贞面性能?
Q53、怎么进行站点内的图片性能优化?
Q54、虚拟DOM一定更快吗?
Q55、有些框架不用虚拟dom，但是他们的性能也不错是为什么?
Q56、如果某个页面有几百个函数需要执行，可以怎么优化页面的性能?
Q57、讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理
Q58、导致页面加载白屏时间长的原因有哪些，怎么进行优化?
es篇
Q59、common.js和es6中模块引入的区别?
Q60、es5 中的类和es6中的dass有什么区别?
Q61、你是怎么理解ES6中 Decorator 的?使用场景有哪些?
Q62、你是怎么理解ES6中Module的?使用场景有哪些?
Q63、你是怎么理解ES6中Proxy的?使用场景有哪些?
Q64、怎么理解ES6中 Generator的?使用场景有哪些?
Q65、你是怎么理解ES6中 Promise的?使用场景有哪些?
Q66、ES6中新增的Set、Map两种数据结构怎么理解?
前端工程化篇
Q67、webpack5 的主要升级点有哪些?
Q68、说下 vite
的原理
Q69、与webpack类似的工具还有哪些?区别?
Q70、说说如何借助webpack来优化前端性能?
Q71、说说webpack proxy工作原理?为什么能解决跨域?
Q72、说说webpack的热更新是如何做到的?原理是什么?
Q73、面试官:说说Loader和Plugin的区别?编写Loader，Plugin的思路?
Q74、说说webpack中常见的Plugin?解决了什么问题?
Q75、说说webpack中常见的Loader?解决了什么问题?
Q76、说说webpack的构建流程?
前端场景题篇
Q77、前端如何实现截图?
Q78、当QPS达到峰值时,该如何处理?
Q79、js 超过 Number 最大值的数怎么处理?
Q80、使用同一个链接， 如何实现 PC 打开是 web 应用、手机打 开是一个 H5 应用?
Q81、如何保证用户的使用体验
Q82、如何解决页面请求接口大规模并发问题
Q83、设计一套全站请求耗时统计工具
Q84、大文件上传了解多少
Q85、H5 如何解决移动端适配问题
Q86、站点一键换肤的实现方式有哪些?
Q87、如何实现网页加载进度条?
Q88、常见图片懒加载方式有哪些?
Q89、cookie 构成部分有哪些
Q90、扫码登录实现方式
Q91、DNS 协议了解多少
Q92、函数式编程了解多少?
Q93、前端水印了解多少?
Q94、什么是领域模型
Q95、一直在 window 上面挂东西是否有什么风险
Q96、深度 SEO 优化的方式有哪些，从技术层面来说
Q97、小程序为什么会有两个线程
Q98、web 应用中如何对静态资源加载失败的场景做降级处理
Q99、html 中前缀为 data-开头的元素属性是什么?
Q100、移动端如何实现上拉加载，下拉刷新?
Q101、如何判断dom元素是否在可视区域
Q102、前端如何用 canvas 来做电影院选票功能
Q103、如何通过设置失效时间清除本地存储的数据?
Q104、如果不使用脚手架，如果用 webpack 构建一个自己的 react 应用
Q105、用 nodejs 实现一个命令行工具， 统计输入目录下面指定 代码的行数
Q106、package.json 里面 sideEffects 属性的作用是啥
Q107、script 标签上有那些属性，分别作用是啥?
Q108、为什么 SPA 应用都会提供一个 hash 路由，好处是什么?
以上面试题： https://github.com/encode-studio-fe/natural_traffic/blob/master/material/scan_material1.md