清明后，致所有准备面试的前端人...

金三银四已然过半，清明假期结束，2026年的Q2正式按下启动键。如果你此刻还在犹豫“现在开始准备是否来得及”，不妨把这个问题换成另一个：从今天开始，到5月初，你还有整整四周。

四周时间，足够一个前端开发者完成一轮完整的面试体系搭建——从HTML/CSS的底层渲染机制，到JS的原型链与事件循环，再到Vue/React的响应式原理与核心源码思路，甚至包括一道手写Promise、一道防抖节流、一道算法中的二叉树层序遍历。

关键是，你需要的不是零散的八股文背诵，而是一份经过验证的、覆盖高频考点的题库作为练习主线。

👇下面涵盖HTML/CSS、JS原理、Vue/React框架、TS、工程化、网络与安全等模块...

链接： https://github.com/encode-studio-fe-coder/natural_traffic/wiki/scan_material3

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.saript标签放在header里和放在body底部里有什么区别?
14.下面代码中，点击“+3”按钮后，age 的值是什么?
15.Vue中，created和mounted两个钩子之间调用时间差值受什么影响?
16.vue中，推荐在哪个生命周期发起请求?
17.不会冒泡的事件有哪些?
18.mouseEnter 和 mouseOver 有什么区别?
..........................................................

CSS（61题）

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 的文字?
..........................................................

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)
11.说说你对 SSG 的理解
12.什么是HTML5，以及和HTML的区别是什么?
13.什么是浙进增强和优雅隆级?
14. Node 和 Element 是什么关系?
15.导致贞面加载白屏时间长的原因有哪些，怎么进行优化?
16.如何控制 input 输入框的输入字数?
..........................................................

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.说说对受控组件和非受控组件的理解，以及应用场景?
11.你在React项目中是如何使用Redux的?项目结构是如何划分的?
12.说说对Redux中间件的理解?常用的中间件有哪些?实现原理?
13.说说你对Redux的理解?其工作原理?
14.说说你对immutable的理解?如何应用在react项目中?
15.说说React ]sx转换成真实DOM过程?
16.说说你在React项目是如何捕获错误的?
17.说说React服务端渲染怎么做?原理是什么?
18,React Fiber 是如何实现更新过程可控?
19.Fiber 为什么是 React 性能的一个飞跃?
20.setstate 是同步，还是异步的?
21.简述下 React 的事件代理机制?
22.简述下 React 的生命周期?每个生命周期都做了什么?
..........................................................

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 中的响应式设计原理
11.Vue中，created和mounted两个钩子之间调用时间差值受什么影响?
12.vue中，推荐在哪个生命周期发起请求?
13.为什么 react 需要 fiber 架构，而 Vue 却不需要?
14.SPA(单页应用)首屏加载速度慢怎么解决?
15.说下Vite的原理
16.Vue2.0为什么不能检查数组的变化，该怎么解决?
17.说说Vue 页面渲染流程
18.vue中computed和watch区别
..........................................................

算法（19题）

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

计算机网络（71题）

1.简单描述从输入网址到页面显示的过程
2.说说WebSocket和HTTP的区别
3.说说 https 的握手过程
4.HTTP2中，多路复用的原理是什么?
5.说说你对"三次握手"、“四次挥手”的理解
6.为什么推荐将静态资源放到cdn上?
7.什么是DNS劫持?
8.TLS 1.3 做了哪些改进?
9.TLS1.2 握手的过程是怎样的?
10.HTTP 报文结构是怎样的?
11.HTTPS 为什么是安全的?
12.Axios的原理是什么?
13.说说对 HTTP3 的了解
14.跨域时怎么处理 cookie?
15.POST请求的 Content-Type 常见的有哪几种?
16.Blob，ArrayBuffer，Base64 分别有哪些使用场景?
..........................................................

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中的事件循环机制理解?
11.说说Node中的EventEmitter?如何实现-个EventEmitter?
12.说说对 Node 中的 Stream 的理解?应用场景?
13.说说对 Node 中的 Buffer 的理解?应用场景?
14.说说对 Node 中的 fs模块的理解?有哪些常用方法
15.说说对 Node 中的 process 的理解?有哪些常用方法?
16.Node.js 有哪些全局对象?
17.说说你对Node.is 的理解?优缺点?应用场景?
18.body-parser 这个中间件是做什么用的?
..........................................................

TypeScript（46题）

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.请实现下面的 myAIl 方法
13.请实现下面的 sum 方法
14.请实现下面的 mergeArray 方法
15.实现下面的 firstsinglechar 方法
16.实现下面的 reverseWord 方法
17.如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型?
18.请补充 objToArray 函数
..........................................................

题不在多，而在精；刷不在快，而在懂。