至今，我发现前端效率低的人都有一个通病！
我发现很多人把“面试挂”甩锅给“刷题不够”“没遇到原题”。但真正拖垮面试的，从来不是算法不行，而是用盲目的无效刷题，代替了前期的精准准备。看似刷了几百道题，80%精力都在死记解法、背八股文、焦虑无关细节，这才是失败的核心！
1️⃣ 最耗时间的坑：没规划就“硬刷”，结果越学越乱
📍打开LeetCodeLeetCode随机刷题，不管知识体系、考察重点，从第一题开始硬刚——这是新手最常见的无效努力。
📍比如准备面试，把算法、框架原理、项目经历全堆在一起复习，面到一半发现：原理说不清、项目讲不透、遇到变形题就懵，只能慌乱收场。这种“先刷题，后思考”的模式，本质是“知识碎片+无效记忆”
2️⃣ 高效面试的关键：前期多花1小时，准备省出10小时
📌反观面试顺利的人，都在“前期拆解”上做足功课，看似慢，实则快：
📌先搭框架再刷题：面试前花1小时梳理知识树：数据结构常考哪几类、框架原理重点是什么、项目难点如何表述，针对性准备只刷高频题；
📌提前定策略再复习：先研究目标公司技术栈和面试风格，再制定复习计划，避免因方向错误大面积返工；
📌建立解题库省时间：平时把典型题型、解题思路、易错点按“数组”“链表”“动态规划”分类整理，面试时快速调用，不用临时硬想。
3️⃣ 其实面试效率的本质，是“先想清楚，再执行”。少在“战术上瞎忙”，多在“战略上准备”——花1小时拆解JD、花30分钟梳理知识体系，比花10小时刷完就忘的“题库海”实在得多。
🔥 之前总觉得“分析需求、梳理逻辑”是浪费时间，直到慢慢摸索出“用知识体系解决面试问题”的思路，才发现那种“面之前心里有谱，面的时候对答如流”的状态，才是真的稳。毕竟，能清晰表达技术思考、精准解决面试官疑问的能力，才是通过的核心！
下面概括的知识点有：JavaScript、Vue、React、Node.js、Webpack、Typescript、性能优化、项目场景、小程序、HTML、CSS、ES6、前端安全等技术栈共有 1000+道面试题。对于 Web 前端的朋友来说应该是最全面最完整的面试备战仓库！
先贴一下github：http:// https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material1
一、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 属性?
十二、小程序（9题）
1.说说微信小程序的架构?
2.为什么小程序里拿不到dom相关的api?
3.小程序的双线程分别做的什么事情?
4.简述微信小程序原理?
5.微信小程序的优劣势?
6.小程序页面间有哪些传递数据的方法?
7.微信小程序bindtap 和 catchtap 区别?
8.小程序 WXSS 与 CSS 的区别?
9.简述一下微信小程序的主要文件有哪些?
十三、ES6（32题）
1.common.js和es6中模块引入的区别?
2.Map 和 Set 的用法以及区别
3.es5 中的类和es6中的cass有什么区别?
4.你是怎么理解ES6中 Decorator 的?使用场景有哪些?
5.你是怎么理解ES6中Module的?使用场景有哪些?
6.你是怎么理解ES6中Proxy的?使用场景有哪些?
7.怎么理解ES6中 Generator的?使用场景有哪些?
8.你是怎么理解ES6中 Promise的?使用场景有哪些?
9.ES6中新增的Set、Map两种数据结构怎么理解?
10.ES6中函数新增了哪些扩展?
十四、编程题（50题）
1.使用Promise实现红绿灯交替重复亮
2.bind、call、apply 有什么区别?如何实现-个bind?
4.说说new操作符具体干了什么?
5.如何实现上拉加载，下拉刷新?
6.大文件怎么实现断点续传?
7.什么是防抖和节流，以及如何编码实现?
8.说说ajax的原理，以及如何实现?
9.深拷贝浅拷贝有什么区别?怎么实现深拷贝?
10.用js实现二叉树的定义和基本操作
十五、设计模式（7题）
1.观察者模式和发布订阅模式分别是什么?有什么区别?
2.开发的过程中你用到过哪些设计模式?
3.设计模式分类
4. 什么是 MVVM? 比之 MVC 有什么区别?什么又是 MVP ?
5.单例模式
6.设计模式的六大原则
7. 工厂模式
十六、前端工程化（34题）
1. package.json 文件中的 devDependencies 和 dependencies 对象有什么区别?
2.webpack 5 的主要升级点有哪些?
3.说下vite的原理
4.与webpack类似的工具还有哪些?区别?
5.说说如何借助webpack来优化前端性能?
6.说说webpack proxy工作原理?为什么能解决跨域?
7.说说webpack的热更新是如何做到的?原理是什么?
8.面试官:说说Loader和Plugin的区别?编写Loader，Plugin的思路?
9.说说webpack中常见的Plugin?解决了什么问题?
10.说说webpack中常见的Loader?解决了什么问题?
注：文中的前端面试汇总PDF已经打包完毕，希望对大家有帮助:http:// https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material1