近几个月面试前端候选人时，我发现几个普遍存在的短板，如果不解决，真的很难给offer！

1. JavaScript 基础不扎实 问题表现：对闭包、事件循环、原型链等核心概念理解模糊，手写代码时容易卡壳（比如实现Promise.all或深拷贝）。

建议： 深入理解V8引擎
的运作机制（如宏任务/微任务、内存回收）。 能解释清楚this绑定规则、async/await底层原理（Generator + Promise）。

2. 框架停留在API层面 问题表现：会用React/Vue写组件，但说不清虚拟DOM diff算法、Hooks依赖收集原理、Vue3
的响应式优化（Proxy vs defineProperty）。

建议： 研究框架源码核心逻辑（如
React Fiber架构、Vue的编译优化）。 思考业务场景：比如长列表渲染如何优化？状态管理库选型依据？

3. 项目描述缺乏技术深度 问题表现：只罗列“用了Vue3+TypeScript”，但不说为什么用（如TS如何减少线上错误？）、遇到什么挑战（如首屏加载从4s优化到1s的具体手段）。

建议： 突出性能优化（Lighthouse评分提升、 
 Webpack分包策略）。 准备一个复杂问题的解决过程（如前端监控系统如何实现无侵入埋点？）。

4. 工程化能力薄弱 问题表现：对前端CI/CD、自动化测试（如
Jest覆盖率提升）、Webpack/Loader插件开发经验不足。

建议： 至少掌握一种高级构建优化（如Module Federation
实现微前端）。 了解现代工具链（如Vite
的ESM预编译、Turbopack对比Webpack的优势）。

以下八股文：

JavaScript(323题)

• 1、不会冒泡的事件有哪些?
• 2、mouseEnter 和 mouseOver 有什么区别?
• 3、MessageChannel 是什么，有什么使用场景?
• 4、async、await 实现原理
• 5、Proxy 能够监听到对象中的对象的引用吗?
• 6、如何让 var [a, b]= {a: 1,b:2}解构赋值成功?
• 7、下面代码会输出什么?
• 8、描述下列代码的执行结果
• 9、什么是作用域链?
• 10、bind、call、apply 有什么区别？如何实现一个bind?
• 11、common.js和es6中模块引入的区别？
• 12、说说 vue3 中的响应式设计原理
• 13、script标签放在header里和放在body底部里有什么区别?
• 14、下面代码中，点击“+3”按钮后，age 的值是什么?
• 15、Vue中，created和mounted两个钩子之间调用时间差值受什么影响?

HTML(57题)

• 1、什么是 DOM 和 BOM?
• 2、简单描述从输入网址到页面显示的过程
• 3、一台设备的dpr，是否是可变的?
• 4、前端该如何选择图片的格式?
• 5、前端跨页面通信，你知道哪些方法?
• 6、说说你对 Dom 树的理解
• 7、行内元素有哪些?块级元素有哪些?空(void)元素有那些?
• 8、html和css中的图片加载与渲染规则是什么样的?
• 9、title与h1的区别、b与strong的区别、i与em的区别?
• 10、script 标签为什么建议放在 body 标签的底部(defer、async)说说你对 SSG 的理解
• 11、什么是HTML5，以及和HTML的区别是什么?
• 12、什么是渐进增强和优雅降级?
• 13、Node 和 Element 是什么关系?
• 14、导致页面加载白屏时间长的原因有哪些，怎么15、进行优化?
• 16、如何控制 input 输入框的输入字数?

React(83题)

• 1、下面代码中，点击“+3”按钮后，age 的值是什么?
• 2、React Portals 有什么用?
• 3、react 和 react-dom 是什么关系?
• 4、为什么 react 需要 fiber 架构，而 Vue 却不需要?
• 5、子组件是一个 Portal，发生点击事件能冒泡到父组件吗?
• 6、说说React render方法的原理?在什么时候会被触发?
• 7、说说React事件和原生事件的执行顺序
• 8、说说对受控组件和非受控组件的理解，以及应用场景?
• 9、你在React项目中是如何使用Redux的?项目结构是如何划分的?
• 10、说说对Redux中间件的理解?常用的中间件有哪些?实现原理?
• 11、说说你对Redux的理解?其工作原理?
• 12、说说你对immutable的理解?如何应用在react项目中?

性能优化(25题)

• 1、script标签放在header里和放在body底部里有什么区别?
• 2、前端性能优化指标有哪些?怎么进行性能检测?
• 3、SPA(单页应用)首屏加载速度慢怎么解决?
• 4、如果使用CSS提高页面性能?
• 5、怎么进行站点内的图片性能优化?
• 6、虚拟DOM一定更快吗?
• 7、有些框架不用虚拟dom，但是他们的性能也不错是为什么?
• 8、如果某个页面有几百个函数需要执行，可以怎么优化页面的性能?
• 9、讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理
• 10、页面加载的过程中，J5 文件是不是一定会阻塞 DOM 和 CSSOM 的构建？
• 11、React.memo()和 useMemo()的用法是什么，有哪些区别?
• 12、导致页面加载白屏时间长的原因有哪些，怎么进行优化?

Vue(80题)

• 1、Vue 有了数据响应式，为何还要 diff ?
• 2、vue3 为什么不需要时间分片?
• 3、vue3 为什么要引入 Composition API ?
• 4、computed 计算值为什么还可以依赖另外一个 computed 计算值?
• 5、说一下 vm.$set 原理
• 6、怎么在 wue 中定义全局方法?
• 7、Vue 中父组件怎么监听到子组件的生命周期?
• 8、vue组件里写的原生addEventListeners监听事件，要手动去销毁吗?为什么？
• 9、说说 vue3 中的响应式设计原理
• 10、ue中，created和mounted两个钩子之间调用时间差值受什么影响?
• 11、vue中，推荐在哪个生命周期发起请求?
• 12、为什么 react 需要 fiber 架构，而 Vue 却不需要?
• 13、SPA(单页应用)首屏加载速度慢怎么解决?
• 14、Vue2.0为什么不能检查数组的变化，该怎么解决?

前端工程化(34题)

• 1.webpack5 的主要升级点有哪些?
• 2.说下vite的原理
• 3.与webpack类似的工具还有哪些?区别?
• 4.说说如何借助webpack来优化前端性能?
• 5.说说webpack proxy工作原埋?为什么能解决跨域?
• 6.说说webpack的热更新是如何做到的?原埋是什么?
• 7.说说webpack的构建流程?
• 8.说说你对webpack的理解?解决了什么问题?
• 9.webpackloader和 plugin 实现原埋
• 10.如何提高webpack的构建速度?
• 11.说说 webpack-dev-server的原埋
• 12.你对 babel 了解吗，能不能说说几个 stage 代表什么意思?
• 13.webpack的module、bundle、chunk分别指的是什么?
• 14.说说你对前端工程化的理解
• 15.说说你对 SSG 的理解
• 16.聊聊 vite 和webpack 的区别
• 17.如何提高webpack的打包速度
• 18.如何用webpack来优化前端性能
• 19.webpack的Loader和Plugin的不同

TypeScript(46题)

• 1. TypeScript中的 Declare 关键字有什么用?
• 2.解释-下TypeScript中的枚举。
• 3.TypeScript 的主要特点是什么?
• 4.TypeScript中的方法重写是什么?
• 5.什么是TypeScript映射文件?
• 6.TypeScript中的类型有哪些?
• 7.如何检查TypeScript中的null和undefined ?
• 8.如何在TypeScript中实现继承?
• 9.什么是TypeScript Declare关键字?
• 10.TypeScript和]avaScript 的区别是什么?
• 11.Typescript中什么是类类型接口?
• 12.Typescript中never 和 void 的区别?
• 13.[ypescript中 interface 和 type 的差别是什么?
• 14.TypeScript中的变量以及如何声明?
• 15.Typescript 中的类是什么?你如何定义它们?
• 16.Typescript中什么是装饰器，它们可以应用于什么?
• 17.解释如何使用 TypeScript mixin。
• 18.TypeScript 中的类型断言是什么?
• 19.TypeScript 中的模块是什么?

计算机网络(71题)

• 1.简单描述从输入网址到页面显示的过程
• 2.说说WebSocket和HTTP的区别
• 3.说说 https 的握手过程
• 4.HTTP2中，多路复用的原理是什么?
• 5.说说你对“三次握手"、“四次挥手”的理解
• 6.为什么推荐将静态资源放到cdn上?
• 7.什么是DNS劫持?
• 8.HTTP 报文结构是怎样的?
• 9. HTTPS 为什么是安全的?
• 10.Axios的原理是什么?
• 11.说说对 HTTP3 的了解
• 12.跨域时怎么处理 cookie?
• 13.POST请求的 Content-Type 常见的有哪几种?
• 14.Blob，ArrayBuffer，Base64分别有哪些使用场景?
• 15.Blob, ArrayBuffer, Base64 有什么区别?
• 16.TCP 和 UDP的区别是什么?
• 17.Http 3.0 是基于 udp 的，那么它是如何保证传输可靠性的?
• 18.说下 websocket 的连接原理
• 19.https是如何保证安全的，又是如何保证不被中间人攻击的?

Node.JS(27题)

• 1.为什么Node在使用es module时必须加上文件扩展名?
• 2.浏览器和 Node 中的事件循环有什么区别?
• 3.Node性能如何进行监控以及优化?
• 4.如何实现文件上传?说说你的思路
• 5.如何实现jwt鉴权机制?说说你的思路
• 6.说说对中间件概念的理解，如何封装node 中间件?
• 7.说说对Nodejs中的事件循环机制理解?
• 8.说说Node中的EventEmitter?如何实现-个EventEmitter?
• 9.说说对 Node 中的 Stream 的理解?应用场景?
• 10.说说对 Node 中的 Buffer 的理解?应用场景?
• 11.说说对 Node 中的 fs模块的理解?有哪些常用方法
• 12.说说对 Node 中的 process 的理解?有哪些常用方法?
• 13.Node.is 有哪些全局对象?
• 14.说说你对​​​​​​​Node.js的理解?优缺点?应用场景?
• 15.body-parser 这个中间件是做什么用的?
• 16.在没有asyncawait 的时候，koa是怎么实现的洋葱模型?
• 17.koa 框架中，该怎么处理中间件的异常?
• 18.Node.is 如何调试?
• 19.两个 Node.is 进程如何通信?

以下场景题：

• 1.请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个 toast
• 2.如何减少项目里面 if-else
• 3.babel-runtime 作用是啥
• 4.如何实现预览 PDF 文件
• 5.如何在划词选择的文本上添加右键菜单(划词:鼠标滑动选 择一组字符，对组字符进行操作)
• 6.富文本里面，是如何做到划词的(鼠标滑动选择一组字 符，对组字符进行操作)?
• 7.如何做好前端监控方案
• 8.如何标准化处理线上用户反馈的问题
• 9.px 如何转为 rem
• 10.浏览器有同源策略，但是为何 cdn 请求资源的时候不会有跨域限制
• 11.cookie 可以实现不同域共享吗
• 12.axios 是否可以取消请求
• 13.前端如何实现折善面板效果?
• 14.dom 里面，如何判定a元素是否是b元素的子元
• 15.判断一个对象是否为空，包含了其原型链上是否有自定义数据或者方法。该如何判定?
• 16.js如何判空?「空」包含了:空数组、空对象、空字符 串、0、undefined、nul、空 map、空set,都属于为空
• 数据
• 17.css 实现翻牌效果
• 18.flex:1代表什么
• 19.一般是怎么做代码重构的
• 20.如何清理源码里面没有被应用的代码，主要是JS、TS、 CSS 代码
• 21.前端应用 如何做国际化?
• 22.应用如何做应用灰度发布
• 23.[微前端] 为何通常在 微前端 应用隔离不选择 iframe 万案
• 24.[微前端] Qiankun 是如何做 JS 隔离的
• 25.「微前端]微前端架构一般是如何做 JavaScript隔离
• 26.[React]循环渲染中 为什么推荐不用 index 做 key
• 27.[React]如何避免使用 context 的时候，引起整个挂载节 点树的重新渲染!
• 28.前端如何实现截图?
• 29.当QPS达到峰值时,该如何处理?
• 30.js 超过 Number 最大值的数怎么处理?
• 31.使用同一个链接，如何实现 PC 打开是 web 应用、手机打 开是一个 H5 应用?
• 32.如何保证用户的使用体验
• 33.如何解决页面请求接口大规模并发问题
• 34.设计一套全站请求耗时统计工具
• 35.大文件上传了解多少
• 36.H5 如何解决移动端适配问题
• 37.站点一键换肤的实现方式有哪些?
• 38.如何实现网页加载进度条?

............

八股文+场景题： https://github.com/encode-studio-fe/natural_traffic/blob/master/material/scan_material1.md