9月前端面试，本质就是一场信息差的battle！！！

2025年前端岗的任职要求又达新高，“卷”主要体现在对开发者技术深度、广度以及综合能力的要求上。简单说，会写页面、会用框架已远远不够。

核心技术与框架

• React/Vue/Angular至少精通其一
• TypeScript成为标配
• 熟悉 状态管理、 路由等生态

Vue 的 Options API 多用于维护旧系统，新项目主导 Composition API

工程化与架构

• Webpack/Vite配置优化（Tree Shaking、Code Splitting）
• CI/CD、 性能监控
• 微前端架构经验

构建工具中，Vite已成为主流选择，Turbopack 则在超大型项目中探索应用

全栈与后端知识

• Node.js（BFF层、SSR、API开发）
• 至少熟悉一种后端语言（Java/Go/Python）
• 了解 DevOps、 云原生（Docker, K8s）

纯前端开发者竞争力下降，全栈意识是分水岭

性能与优化

• Lighthouse评分优化
• Web Vitals指标理解与优化（LCP, CLS, INP）
• 运行时性能分析与调优

性能优化AI工具开始普及，但深入理解原理仍是基础

跨端开发

• React Native/Flutter（原生渲染）
• 小程序/ 鸿蒙

ArkUI-X开发
• 响应式设计与适配

跨端技术是很多业务的现实需求，大厂推崇“一套代码，多端运行”

AI能力

• AI辅助编程（Copilot, Cursor）高效使用
• Prompt Engineering
• 了解大模型应用（RAG, LangChain）

不懂AI的前端正面临淘汰风险，AI能力成为新的门槛

软技能与业务

• 业务理解与 产品思维
• 沟通协作与 技术表达
• 解决问题与 复盘能力

企业青睐能技术赋能业务、创造价值的开发者

以上面试内容github：https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material5

前端框架类面试内容

React

1. React19 新特性
2. fiber架构的工作原理？
3. React Reconciler 为何要采用 fiber 架构?
4. useState 是如何实现的?
5. React Fiber是什么?
6. 简单介绍下React中的diff 算法
7. 如何让 useEffect 支持 async/await?
8. React中怎么实现状态自动保存(KeepAlive)？
9. ReactFiber是如何实现更新过程可控？
10. react中懒加载的实现原理是什么？
11. React有哪些性能优化的方法？
12. 不同版本的React都做过哪些优化？
13. React18新特性
14. 说说你对ReactHook的闭包陷阱的理解，有哪些解决方案？
15. React 中，怎么给 children添加额外的属性？
16. Fiber 为什么是 React 性能的一个飞跃?
17. react是否支持给标签设置自定义的属性，比如给video标签设置webkit-playsinline?
18. 说说React render阶段的执行过程
19. React 中，fiber是如何实现时间切片的?
20. React中为什么不直接使用requestldleCallback?
21. 说说React commit阶段的执行过程
22. React中的路由懒加载是什么？原理是什么？
23. 为什么useState返回的是数组而不是对象？
24. React组件间怎么进行通信？
25. React和Vue在技术层面有哪些区别？
26. 子组件是一个Portal，发生点击事件能冒泡到父组件吗？
27. Redux和Vuex有什么区别，它们有什么共同思想吗？

Vue

1. Vue模板是如何编译的
2. vue3相比较于vue2，在编译阶段有哪些改进？
3. 说说Vue页面渲染流程
4. Vue项目中，你做过哪些性能优化？
5. 如果使用Vue3.0实现一个Modal,你会怎么进行设计?
6. Vue3.0里为什么要用 Proxy API 替代defineProperty API?
7. Vue有了数据响应式，为何还要diff？
8. 说说vue3中的响应式设计原理
9. 说说 Vue 中 CSS scoped 的原理
10. vue3的响应式库是独立出来的，如果单独使用是什么样的效果？
11. 手写vue的双向绑定
12. 什么是虚拟DOM？如何实现一个虚拟DOM?说说你的思路
13. SSR是什么？Vue中怎么实现？
14. 说下Vite的原理
15. Vue2.0为什么不能检查数组的变化，该怎么解决？
16. Vue3.0 所采用的 Composition Api 与Vue2.x 使用的 Options Api 有什么不同?
17. React 和Vue在技术层面有哪些区别?
18. vue2 中的虚拟 dom是怎么实现的?
19. 说说vue中，key的原理
20. 谈谈 Vue 事件机制，并手写$on、$off、Semit、$once
21. Vue项目中如何解决跨域问题？
22. Vue 中的 h 函数有什么用？
23. Vue组件间通信方式都有哪些？
24. 说说你对slot的理解？slot使用场景有哪些?
25. vue 文件中，在 v-for 时给每项元素绑定事件需要用事件代理吗，为什么？
26. Vue中，created和mounted两个钩子之间调用时间差值受什么影响？
27. vue的响应式开发比命令式有哪些优势？
28. Vue怎么实现权限管理？控制到按钮级别的权限怎么做？

项目场景

1. 怎么在前端页面中添加水印？
2. 如何封装一个请求，让其多次调用的时候，实际只发起一个请求的时候，返回同一份结果？
3. web网页如何禁止别人移除水印
4. react中怎么实现下拉菜单场景，要求点击区域外能关闭下拉组件
5. React 如何实现 vue 中 keep-alive 的功能？
6. 如何监控前端页面的崩溃？
7. 如何搭建一套灰度系统？
8. 如何在前端团队快速落地代码规范
9. 前端如何实现即时通讯？
10. 用户访问页面白屏了，原因是啥，如何排查？
11. 如何给自己团队的大型前端项目设计单元测试?
12. 如何做一个前端项目工程的自动化部署，有哪些规范和流程设计？
13. 你参与过哪些前端基建方面的建设？
14. 假如让你负责一个商城系统的开发，现在需要统计商品的点击量，你有什么样设计与实现的思路？
15. 前端怎么做错误监控？
16. 怎么实现同一个链接，PC访问是web应用，而手机打开是一个H5应用？
17. token过期后，页面如何实现无感刷新?
18. 如何解决页面请求接口大规模并发问题
19. 前端单页应用History路由模式，需要如何配置 nginx?
20. web应用中如何对静态资源加载失败的场景做降级处理？
21. 什么是单点登录，以及如何进行实现？
22. SPA首屏加载速度慢的怎么解决
23. Redux和Vuex的设计思想是什么?
24. 怎么使用 webpack，将JS 文件中的 css提取到单独的样式文件中？
25. 站点一键换肤的实现方式有哪些？
26. 实现table header吸顶，有哪些实现方式？

手写代码

1. 实现深拷贝
2. 请手写“堆排序”
3. ​虚拟dom原理是什么，手写一个简单的虚拟 dom 实现
4. 请在不使用setTimeout的前提下，实现setlnterval
5. ​实现JSONP
6. ​实现一个类，其实例可以链式调用，它有一个 sleep 方法，可以 sleep 一段时间后再后续调用
7. ​编写一个vue组件，组件内部使用插槽接收外部内容，v-model双向绑定，实现折叠展开的功能
8. ​版本号排序
9. ​Promise 的 finally 怎么实现的?
10. ​实现 Promise
11. 字符串解析问题
12. ​实现mergePromise函数
13. ​使用Promise实现：限制异步操作的并发个数，并尽可能快的完成全部
14. 请手写“希尔排序”
15. 深拷贝浅拷贝有什么区别？怎么实现深拷贝
16. ​使用Promise实现红绿灯交替重复亮
17. ​实现有并行限制的Promise调度器
18. 写出一个函数trans，将数字转换成汉语的输出，输入为不超过10000亿的数字。
19. 根据运算优先级添加括号
20. ​请手写“归并排序”
21. ​写一个LRU缓存函数
22. 实现一个对象的 flatten方法
23. 实现柯里化
24. ​使用js实现有序数组原地去重
25. 请手写“插入排序”
26. 计算出下面数组中的平均时间

工程化

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？解决了什么问题？
11. 说说webpack的构建流程？
12. 说说你对webpack的理解？解决了什么问题？
13. webpack loader 和 plugin 实现原理
14. 如何提高webpack的构建速度？
15. 说说 webpack-dev-server 的原理
16. 你对babel了解吗，能不能说说几个stage代表什么意思？
17. webpack的module、bundle、chunk分别指的是什么?
18. 什么是 CI/CD?
19. 说说你对前端工程化的理解
20. 说说你对SSG的理解
21. 聊聊vite和webpack的区别
22. webpacktreeShaking机制的原理是什么？
23. 介绍一下tree shaking及其工作原理
24. 前后端分离是什么?
25. Babel的原理是什么
26. webpack的热更新是如何做到的？说明其原理

性能优化

1. script标签放在header里和放在body底部里有什么区别?
2. 前端性能优化指标有哪些？怎么进行性能检测？
3. SPA（单页应用）首屏加载速度慢怎么解决?
4. 如果使用CSS提高页面性能？
5. 怎么进行站点内的图片性能优化？
6. 虚拟DOM一定更快吗？
7. 有些框架不用虚拟dom，但是他们的性能也不错是为什么？
8. 如果某个页面有几百个函数需要执行，可以怎么优化页面的性能？
9. 讲一下png8、png16、png32的区别，并简单讲讲 png的压缩原理
10. 页面加载的过程中，JS 文件是不是一定会阻塞DOM和CSSOM的...
11. React.memo()和useMemo(的用法是什么，有哪些区别?
12. 导致页面加载白屏时间长的原因有哪些，怎么进行优化？
13. 如果一个列表有100000个数据，这个该怎么进行展示？
14. DNS预解析是什么？怎么实现?
15. 在React中可以做哪些性能优化?
16. 浏览器为什么要请求并发数限制？
17. 如何确定页面的可用性时间，什么是PerformanceAPI?
18. 谈谈对 window.requestAnimationFrame 的理解
19. css加载会造成阻塞吗?
20. 什么是内存泄漏？什么原因会导致呢？
21. 如何用webpack来优化前端性能
22. 说说常规的前端性能优化手段
23. 什么是CSS Sprites?
24. CSS优化、提高性能的方法有哪些？
25. script标签中，async和defer两个属性有什么用途和区别？

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中的枚举。

以上是一些中大厂前端面试中会问到的内容，可以供9月准备面试的宝子参考，以上内容皆有对应答案，但由于篇幅太长就不一一展示了，github：https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material5。老实说，今年很多人转行，这行也不知道还能活多长时间...

好了不焦虑了，祝大家在9月收获满满，今天内容就这些