这份清单，是无数次面试复盘后沉淀下来的“考点最大公约数”，是八股文里的精华。它由十六个经典模块构成，像积木一样，能拼出绝大多数大厂面试的轮廓：
1.JavaScript 深度解剖室：这里不问“怎么用”，专问“为什么”。从堆栈内存到闭包原型，从事件循环到模块化演进，每一个概念都能被拆解成带代码的论述题。
2.框架原理拆解场：Vue 的响应式与 React 的 Fiber，diff 算法与渲染优化。这里需要你像框架作者一样思考，解释那些“魔法”背后的朴素逻辑。
3.浏览器硬核工厂：从输入 URL 到页面展现，每一步都可以是万字长文的起点。渲染性能、缓存策略、安全防护，这里是理论与实践的结合部。
4.工程化与性能优化竞技台：Webpack、Vite 的配置与原理，首屏加载的秒数博弈，如何度量与优化。这里考察的是你能否从“开发者”视角切换到“用户体验守护者”乃至“架构师”视角。
5.手写代码实验室：Promise、异步调度、深浅拷贝、函数柯里化……面试官想看的不仅是你实现功能，更是你对代码健壮性、边界处理和设计思路的考量。
6.......
下面，就让我们看下这份 “拼夕夕”清单
一、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?
二、CSS（61题）
- 1. css 中的 animation、transition、 transform 有什么区别?
- 2.怎么做移动端的样式适配?
- 3.相邻的两个inline-block节点为什么会出现间隔，该如何解决?
- 4. grid网格布局是什么？
- 5.CSS3新增了哪些特性?
- 6.怎么使用 CSS3 实现动画?
- 7.怎么理解回流跟重绘?什么场景下会触发?
- 8.什么是响应式设计?响应式设计的吗？基本原理是什么?如何进行实现?
- 9.如果使用CSS提高页面性能?
- 10.如何实现单行/多行文本溢出的省略样式?
三、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)
四、React（83题）
- 1.下面代码中，点击“+3"按钮后，age 的值是什么?
- 2.React Portals 有什么用?
- 3.react 和 react-dom 是什么关系?
- 4. React 中为什么不直接使用 requestIdleCallback?
- 5.为什么 react 需要 fiber 架构，而 Vue 却不需要?
- 6.子组件是一个 Portal，发生点击事件能冒泡到父组件吗?
- 8.说说React render方法的原理?在什么时候会被触发?
- 9.说说React事件和原生事件的执行顺序
- 10.说说对受控组件和非受控组件的理解，以及应用场景?
五、Vue（80题）
- 1. Vue 有了数据响应式，为何还要 dif ?
- 2.vue3 为什么不需要时间分片?
- 3.vue3 为什么要引入 Composition API ?
- 4.谈谈 Vue 事件机制，并手写$on、$off、$emit、$once
- 5.computed 计算值为什么还可以依赖另外-个 computed 计算值?
- 6.说-下 vm.$set 原理
- 7. 怎么在 Wue 中定义全局方法?
- 8.Vue 中父组件怎么监听到子组件的生命周期?
- 10.说说 vue3 中的响应式设计原理
六、算法（19题）
- 1.最大的钻石
- 2.举例说明你对尾递归的理解，以及有哪些应用场景
- 3.去除字符串中出现次数最少的字符，不改变原字符串的顺序。
- 4.请手写“快速排序”
- 5.洗牌算法
- 6.什么是尾调用优化和尾递归?
- 7.合并K个升序链表
- 8.什么是时间复杂度?
- 9.请手写“基数排序”
- 10.请手写"桶排序"
七、计算机网络（71题）
- 1.简单描述从输入网址到页面显示的过程
- 2.说说WebSocket和HTTP的区别
- 3.说说 https 的握手过程
- 4.HTTP2中，多路复用的原理是什么?
- 5.说说你对"三次握手"、“四次挥手”的理解
- 6.为什么推荐将静态资源放到cdn上?
- 7.什么是DNS劫持?
- 8.TLS 1.3 做了哪些改进?
- 9.TLS1.2 握手的过程是怎样的?
- 10.HTTP 报文结构是怎样的?
八、Node.js（27题）
- 1.common.js和es6中模块引入的区别?
- 2.为什么Node在使用es module时必须加上文件扩展名?
- 3.浏览器和 Node 中的事件循环有什么区别?
- 4.Node性能如何进行监控以及优化?
- 5.如果让你来设计一个分页功能,你会怎么设计?前后端如何交互?
- 6.如何实现文件上传?说说你的思路
- 7.如何实现iwt鉴权机制?说说你的思路
- 8.说说对中间件概念的理解，如何封装 node 中间件?
- 9.说说 Node 文件査找的优先级以及 Require 方法的文件查找策略?
- 10.说说对Nodejs中的事件循环机制理解?
九、TypeScript（46题）
- 1.说说对 TypeScript 中命名空间与模块的理解?区别?
- 2.说说你对 typescript 的理解?与 javascript 的区别?
- 3.Typescript中泛型是什么?
- 4.TypeScript中有哪些声明变量的方式?
- 5.什么是Typescript的方法重载?
- 6.请实现下面的 sleep 方法
- 7. typescript 中的 is 关键字有什么用?
- 8.TypeScript支持的访问修饰符有哪些?
- 9.请实现下面的 myMap 方法
- 10.请实现下面的 treePath 方法
十、性能优化（25题）
- 1.script标签放在header里和放在body底部里有什么区别?
- 2.前端性能优化指标有哪些?怎么进行性能检测?
- 3.SPA(单页应用)首屏加载速度慢怎么解决?
- 4.如果使用CSS提高贞面性能?
- 5.怎么进行站点内的图片性能优化?
- 6.虚拟DOM一定更快吗?
- 7.有些框架不用虚拟dom，但是他们的性能也不错是为什么?
- 8.如果某个页面有几百个函数需要执行，可以怎么优化页面的性能?
- 9.讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理
- 10.React.memo()和 useMemo()的用法是什么，有哪些区别?
十一、前端安全（21题）
- 1.说说你对 XSS的了解
- 2.web常见的攻击方式有哪些，以及如何进行防御?
- 3.说说你对前端鉴权的理解
- 4.如何禁止别人调试自己的前端代码?
- 5.CSP(Content Security Policy)可以解决什么问题?
- 6.前端怎么实现跨域请求?
- 7. HTTPS 有哪些优点?
- 8.webSocket 有哪些安全问题，应该如何应对?
- 9.什么是点击劫持?如何防范点击劫持?
- 10.什么是 Samesite Cookie 属性?
......
为了不影响读者的阅读兴趣，本文就展示到这，需要的小伙伴： https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material3
