先讲讲我的情况，我大专毕业，做前端开发快 5 年了，月月xxxxx，对我来说，这真的很满足。但我不建议大家盲目学前端，下面就给大家分享一下准备前端面试的正确学习顺序🔽。

一、前端基础三件套

1.HTML：理解语义化标签、常用元素属性、表单与表格。

2.CSS：掌握盒模型、定位、浮动、Flexbox、Grid 布局，熟悉响应式设计与常见适配方案。

3.JavaScript：熟练掌握变量、数据类型、函数、作用域、闭包、原型与原型链、异步编程（Promise、async/await）、ES6+ 常用语法。

二、框架与工具

掌握至少一个主流框架（如 
Vue.js / 
React），理解其核心思想（数据驱动、组件化、虚拟 DOM 等）。

1.熟悉配套生态：Vue Router、Vuex / Pinia（或 React Router、Redux / Zustand）。

2.学会使用构建工具：
Webpack 或 
Vite，了解基本配置与优化手段。

3.掌握代码管理工具 
Git，熟悉常用工作流。

三、网络与浏览器

1.熟悉 
HTTP/HTTPS 协议，了解常见状态码、请求方法、缓存机制。

2.掌握浏览器渲染原理、重绘与回流、事件循环机制。

3.学会使用
浏览器开发者工具进行调试与性能分析。

四、性能优化与实践

1.了解常见性能指标（如 FCP、LCP、CLS 等）。

2.掌握资源加载优化、代码分割、懒加载、图片优化等手段。

3.熟悉前端安全常见问题与防范措施（XSS、CSRF 等）。

五、工程化与协作

1.掌握模块化开发（CommonJS、ES Module）。

2.熟悉代码规范工具（ESLint、Prettier）、单元测试框架（Jest、Vitest）。

3.了解 CI/CD 基本流程，能够编写简单部署脚本。

六、综合能力与项目经验

1.能够清晰描述过往项目，突出技术难点、解决方案与个人成长。

2.掌握常见数据结构与算法基础，能够应对手写代码题。

3.具备良好的沟通能力与团队协作意识，理解业务与技术结合的思路。

以我过来人的经验，只要踏实学习、持续积累，你不会后悔的！

---

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 进程如何通信?

由于篇幅限制，本文只展示了部分内容，完整版《前端面试八股文合集》pdf已打包，希望对大家有所帮助： https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material1