大家有空就去看这份前端宝典，真的能提高level

如果你感觉刷了无数八股文、背了各种框架API，面试时依然被问到哑口无言——问题可能不在于你不够努力，而在于你努力的方向，恰好错过了当前面试真正的筛选逻辑。

如今的前端面试，已经形成了一套高度标准化的「能力探测模型」：

广度覆盖：从 JavaScript 核心原理，到框架设计思想，再到工程化、性能优化、网络乃至基础算法。
深度追问：不再满足于“知道是什么”，而是连续追问“为什么这样设计”与“如何自己实现”。
场景串联：将零散的知识点置于一个虚拟的高并发、高性能业务场景中，考察你的系统化思维。

这导致了一个必然结果：依靠碎片化学习和临时记忆，已难以通过中高级岗位的面试。你需要一份结构化、有深度的知识体系。

八股文涵盖：JavaScript、CSS、HTML、React、Vue、算法、计算机网络、Node.js、TypeScript、性能优化、前端安全、小程序、ES6、编程题、设计模式、工程化

先贴一下GitHub： https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material3

1.JavaScript

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两个钩子之间调用时间差值受什么影响?
16.vue中，推荐在哪个生命周期发起请求？
17.为什么Node在使用esmodule时必须加上文件扩展名？
18. package.json 文件中的 devDependencies 和 dependencies 对象有...
19.React Portals 有什么用?
20. react 和 react-dom是什么关系？
21.MessageChannel是什么，有什么使用场景？
22.React 中为什么不直接使用 requestIdleCallback?
23.为什么react需要fiber架构，而Vue却不需要？
24.子组件是一个Portal，发生点击事件能冒泡到父组件吗？
25. async、await 实现原理

2.CSS

1. css 中的 animation、transition、transform 有什么区别?
2.怎么做移动端的样式适配？
3.相邻的两个inline-block节点为什么会出现间隔，该如何解决？
4.grid网格布局是什么?
5.CSS3新增了哪些特性？
6.怎么使用CSS3实现动画？
7.怎么理解回流跟重绘？什么场景下会触发？
8.什么是响应式设计？响应式设计的基本原理是什么？如何进行实现？
9.如果使用CSS提高页面性能？
10.如何实现单行/多行文本溢出的省略样式？
11.如何使用css完成视差滚动效果？
12.怎么使用CSS如何画一个三角形
13.说说对CSS工程化的理解
14.怎么触发BFC，BFC有什么应用场景？
15.单行文本怎么实现两端对齐？
16.说说你对CSS模块化的理解
17.CSS模块化的实现方式
18.怎么让Chrome支持小于12px 的文字？
19.怎么让Chrome支持小于12px的文字？
20.flexbox(弹性盒布局模型）是什么，适用什么场景？
21.如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？
22.设备像素、css像素、设备独立像素、dpr、ppi之间有什么区别?
23.说说你对盒子模型的理解
24.怎么实现样式隔离？
25.flex布局下，怎么改变元素的顺序？

3.HTML

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）
11.说说你对 SSG的理解
12.什么是HTML5，以及和HTML的区别是什么？
13.什么是渐进增强和优雅降级？
14.Node和Element是什么关系？
15.导致页面加载白屏时间长的原因有哪些，怎么进行优化？
16.如何控制input输入框的输入字数？
17.渐进式jpg有了解过吗？
18.假设我要上传图片，怎么在选择图片后，通过浏览器预览待上传的...
19.怎么实现”点击回到顶部”的功能？
20.SPA应用怎么进行SEO?
21.如何实现SEO优化
22.SEO是什么？
23.SEO的原理是什么？
24.DNS预解析是什么？怎么实现？
25.HTML5有哪些 drag 相关的 API？

4.React

1.下面代码中，点击"+3”按钮后，age的值是什么？
2. React Portals 有什么用?
3.react 和react-dom是什么关系?
4.React中为什么不直接使用requestIdleCallback?
5.为什么react需要fiber架构，而Vue却不需要？
6.子组件是一个Portal，发生点击事件能冒泡到父组件吗？
7. React 为什么要废弃componentWillMount、componentWillReceivePr...
8.说说React render方法的原理？在什么时候会被触发？
9.说说React事件和原生事件的执行顺序
10.说说对受控组件和非受控组件的理解，以及应用场景？
11.你在React项目中是如何使用Redux的？项目结构是如何划分的？
12.说说对Redux中间件的理解？常用的中间件有哪些？实现原理？
13.说说你对Redux的理解？其工作原理？
14.说说你对immutable的理解？如何应用在react项目中？
15.说说ReactJsx转换成真实DOM过程?
16.说说你在React项目是如何捕获错误的？
17.说说React服务端渲染怎么做？原理是什么？
18.ReactFiber是如何实现更新过程可控？
19.Fiber为什么是React 性能的一个飞跃？
20.setState是同步，还是异步的?
21.简述下React的事件代理机制？
22.简述下React的生命周期？每个生命周期都做了什么？
23.为什么不能在循环、条件或嵌套函数中调用Hooks？
24.说说你对useContext 的理解
25.说说你对useMemo的理解

5.Vue

1.Vue有了数据响应式，为何还要diff？
2.vue3为什么不需要时间分片？
3. vue3为什么要引I入Composition API？
4.谈谈Vue事件机制，并手写$on、$off、$emit、$once
5.computed计算值为什么还可以依赖另外—个computed计算值？
6.说下vm.$set 原理
7.怎么在Vue中定义全局方法?
8.Vue中父组件怎么监听到子组件的生命周期？
9.vue组件里写的原生addEventListeners监听事件，要手动去销毁吗？..
10.说说vue3中的响应式设计原理
11.Vue中，created和mounted两个钩子之间调用时间差值受什么影响?
12.vue中，推荐在哪个生命周期发起请求？
13.为什么react 需要 fiber架构，而Vue却不需要？
14.SPA（单页应用）首屏加载速度慢怎么解决？
15.说下Vite的原理
16.Vue2.0为什么不能检查数组的变化，该怎么解决？
17. 说说Vue 页面渲染流程
18.vue中computed和watch区别
19.vuex中的辅助函数怎么使用?
20.如果使用Vue3.0实现一个Modal，你会怎么进行设计?
21.Vue 3.0中Treeshaking特性是什么，并举例进行说明？
22.Vue3.0所采用的 Composition Api与Vue2.x 使用的 Options Api 有...
23.Vue3.0性能提升主要是通过哪几方面体现的？
24.Vue3.0的设计目标是什么？做了哪些优化?
25.你是怎么处理vue项目中的错误的？

6.算法

1. 最大的钻石
2.举例说明你对尾递归的理解，以及有哪些应用场景
3.去除字符串中出现次数最少的字符，不改变原字符串的顺序。
4.请手写“快速排序”
5.洗牌算法
6.什么是尾调用优化和尾递归？
7.合并K个升序链表
8.什么是时间复杂度？
9.请手写“基数排序”
10.请手写”桶排序”
11.请手写“计数排序”
12.请手写“堆排序”
13.请手写“归并排序”
14.请手写“希尔排序”
15.请手写“插入排序”
16.请手写”选择排序”
17.请手写”冒泡排序”
18.写一个LRU缓存函数
19.实现一个函数，判断输入是不是回文字符串。

7.Node.js

1. common.js和es6中模块引I入的区别？
2.为什么Node在使用esmodule时必须加上文件扩展名？
3.浏览器和Node中的事件循环有什么区别？
4.Node性能如何进行监控以及优化？
5.如果让你来设计一个分页功能，你会怎么设计？前后端如何交互？
6.如何实现文件上传？说说你的思路
7.如何实现jwt鉴权机制？说说你的思路
8.说说对中间件概念的理解，如何封装node中间件？
9.说说Node文件查找的优先级以及Require方法的文件查找策略？
10.说说对Nodejs中的事件循环机制理解？
11.说说Node中的EventEmitter?？如何实现——个EventEmitter?
12.说说对Node中的Stream的理解？应用场景？
13.说说对Node中的Buffer的理解？应用场景？
14.说说对Node中的fs模块的理解？有哪些常用方法
15.说说对Node中的process的理解？有哪些常用方法?
16.Node.js 有哪些全局对象？
17.说说你对Node.js的理解？优缺点？应用场景？
18.body-parser这个中间件是做什么用的?
19.Koa中，如果一个中间件没有调用await nextO，后续的中间件还会...
20.在没有async await 的时候，koa是怎么实现的洋葱模型？
21.koa框架中，该怎么处理中间件的异常？
22. Node.js 如何调试?
23.说说你对koa洋葱模型的理解
24.pm2守护进程的原理是什么？
25.koa和express有哪些不同？

8.Typescript

1.说说对TypeScript中命名空间与模块的理解？区别？
2.说说你对 typescript 的理解？与javascript 的区别?
3. Typescript中泛型是什么？
4.TypeScript中有哪些声明变量的方式?
5.什么是Typescript的方法重载?
6.请实现下面的sleep方法
7.typescript 中的 is关键字有什么用?
8.TypeScript支持的访问修饰符有哪些?
9.请实现下面的myMap方法
10.请实现下面的 treePath方法
11.请实现下面的product 方法
12.请实现下面的myAll 方法
13.请实现下面的sum方法
14.请实现下面的 mergeArray方法
15.实现下面的 firstSingleChar方法
16.实现下面的 reverseWord方法
17.如何定义一个数组，它的元素可能是字符串类型，也可能是数值类...
18.请补充objToArray函数
19.使用TS实现一个判断传入参数是否是数组类型的方法
20.TypeScript的内置数据类型有哪些?
21.ts中any和unknown有什么区别?
22.如何将unknown类型指定为一个更具体的类型？
23.使用ts实现一个判断入参是否是数组类型的方法？
24.tsconfig.json文件有什么用？
25.TypeScript中的Declare关键字有什么用?
26.解释—下TypeScript中的枚举。

场景题

1.如何判断用户设备
2.将多次提交压缩成一次提交
3.介绍下navigator.sendBeacon方法
4.混动跟随导航（电梯导航）该如何实现
5退出浏览器之前，发送积压的埋点数据请求，该如何做？
6如何统计页面的long task（长任务）【热度：140】
7.PerfoemanceObserver如何测量页面性能
8.移动端如何实现下拉滚动加载（顶部加载）
9.判断页签是否为活跃状态
10.在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗？
11.大文件切片上传的时候，确定切片数量的时候，有那些考量因素
12.页面关闭时执行方法，该如何做
13.如何统计用户pv访问的发起请求数量
14.长文本溢出，展开/收起如何实现
15.如何实现鼠标拖拽
16.统计全站每一个静态资源加载耗时，该如何做
17.防止前端页面重复请求
18.ResizeObserver作用是什么
19.要实时统计用户浏览器窗口大小，该如何做
20.当项目报错，你想定位是哪个commit引l入的错误的时，该怎么做
......

简历板块

1.注意:
1.简历模板不要太花哨，尽量清晰简单;
2.简历行间距要留白，不要加入过多;
3.不要通篇都是加粗字体，只针对核心字体加粗标识即可，不然会导致虚焦，容易让面试官抓不住重点;
4.简历的核心在于工作描述和项目描述，这两部分一定要重点描述清楚，不要写很"虚”的内容，一定要精确到技术栈的使用和实现，工作项目中可以讲的比较笼统，但项目介绍一定要精确到项目实现细节和难点;

2.工作经历的注意事项
1.工作经历建议从近到远的写；
2.如果当前工作经历过多，比如超过1年1跳，可以针对比较老的工作经历（比如有4份工作经历，其中工作前2年
有2份工作经历）进行合并处理，因为就算背调也一般会背调最近两份工作经历，过老的工作经历主要用来看项
目的稳定性，可以适当润色合并；（注意：如果面试的公司一定要老项目的流水或者之前公司的联系方式，这
种case就不要合并项目）：
3.如果近期的工作经历有空窗期超过2个月，建议可以补充自己在空窗期也有技术的成长；如果空窗期超过了半
年，一定要加项目，不可有过长的空窗期，参考如下，甚至公司项目结束了离职后，自己的项目这些文字也
可以不要，面试官问流水可以说是项目创业或者没有缴纳社保，只要有正当理由表示就可以；

3，项目要如何写才能达到面试官满意的程度
注意：以上项目的描述是最基础的，不可以直接抄到简历上。
建议项目按照：3~4个业务项目+2~3个技术项目穿插着写，（年限低的同学可以适当缩减）。
·业务项目：
a，业务项目是要体现在工作过程中遇到的实际问题的，建议围绕着前端性能优化、稳定性治理、用户体验和
工程化落地这几个方向去写；
b.第一部分（1~2点）：写关于Vue、React技术栈的使用，不要写使用使用Vue、React完成了项目开发迭
代，要讲到使用这部分技术栈完成了xXx具体业务的开发；
c，第二部分（1~2点）：使用了哪些生态库完成了项目的开发：这里可以写使用elementUI、antdesign等完
成了xxx系统的xxx部分的开发迭代；使用xxx实现了xXx功能，一定要落实到具体的技术点；
d，第三部分（2~3点）：当前项目中的亮点，也就是别人没有自己有的内容，这块要往前端性能优化、稳定
性治理、用户体验和工程化落地这几个方向靠，一定要具体；
e，第四部分（1点）：如果有团队管理经验，要写出来带团队内容，比如带领xx人完成xx项目的前端开发，负
责需求的分发和业务进展的同步；
f，第五部分（1~2点）：可以结合技术项目，写出如何使用技术项目解决了业务项目的痛点，或者紧接着当前
的业务项目，单独罗列出技术项目；

4.错误简历示范
·项目换的太频繁，一眼就没有看下去的欲望，面试官会直接pass掉，可以把最老的几个合并一下，然后最新的
不变。项目讲的时候得从技术的角度讲出来，而不是业务描述讲出来
·项目写的太笼统，没有自己的核心亮点，通篇陈述基础概念
直接照抄技术项目，没有结合业务描述，会导致项目很生硬