4月前端幸存指南：如何让面试官在场景追问环节瞳孔地震（附脑图模板）

最近在面试地狱模式里连轴转，每天2-3场车轮战，面到第10天突然开窍——现在徒手撕框架源码都能带解说！但真正让我后背发凉的，是今年前端面试的隐形攻防战：一面八股文只是入场券，二面场景题才是绞肉机。

突击检查了30+前端岗的面经，发现致命规律：一面还在问Diff算法实现，二面直接甩出"高并发场景下如何设计前端缓存策略"。面试官甚至会把你的项目流水线拆解重组，追问"如果让你用微前端重构这个系统，哪些模块会埋雷？"

更残酷的是，身边手握15k+ offer的朋友都在偷偷复盘：项目深挖环节的连环追击，直接导致60%候选人当场露怯。那些把React原理倒背如流的人，面对"如何用性能监控数据反推代码缺陷"时集体沉默。

面对这种情况，小编联合阿里、字节大佬整理了近期常见的面试八股文、场景题，大家可以拿去看看，需要完整版的小伙伴们，请【点击此处】直接获取资料。

HTML题目预览：

1. 什么是DOM和 BOM?

2.简单描述从输入网址到页面显示的过程

3.一台设备的dpr，是否是可变的?

4.前端该如何选择图片的格式？

5.前端跨页面通信，你知道哪些方法？

6. 说说你对 Dom树的理解

7.行内元素有哪些？块级元素有哪些？空(void)元素有那些？

8.htm和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？

26.浏览器乱码的原因是什么？如何解决？

27. Canvas和svG有什么区别?

28.浏览器是如何对HTML5的离线储存资源进行管理和载？

.............

 

React题目预览：

1. 下面代码中，点击”+3”按钮后，age的值是什么？

2. React Portals 有什么用？

3.react 和 react-dom是什么关系?

4. React中为什么不直接使用 requestIdleCallback?

5. 为什么react需要 fiber 架构，而Vue 却不需要？

6.子组件是一个Portal，发生点击事件能冒泡到父组件吗？

7. React 为什么要废弃 componentWillMount、componentWillReceiveProps、component...

8.说说React render方法的原理？在什么时候会被触发？

9.说说React事件和原生事件的执行顺序

10.说说对受控组件和非受控组件的理解，以及应用场景？

11.你在React项目中是如何使用Redux的？项目结构是如何划分的？

12.说说对Redux中间件的理解？常用的中间件有哪些？实现原理？

13.说说你对Redux的理解？其工作原理？

14.说说你对immutable的理解？如何应用在react项目中？

15. 说说React Jsx转换成真实DOM过程?

16.说说你在React项目是如何捕获错误的？

17.说说React服务端渲染怎么做？原理是什么?

18. React Fiber是如何实现更新过程可控？

19. Fiber 为什么是React 性能的一个飞跃？

20. setState是同步，还是异步的？

21. 简述下React的事件代理机制？

22.简述下React的生命周期？每个生命周期都做了什么?

23.为什么不能在循环、条件或嵌套函数中调用Hooks？

24. 说说你对 useContext 的理解

25.说说你对 useMemo 的理解

26. 说说你对自定义hook的理解

27. 如何让 useEffect 支持 async/await?

28.我们应该在什么场景下使用useMemo和useCallback？

29.说说你对React Hook的闭包陷阱的理解，有哪些解决方案？

 

Vue题目预览：

1. Vue有了数据响应式，为何还要diff？

2. vue3为什么不需要时间分片?

3.vue3 为什么要引入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和Owatch区别

19.vuex中的辅助函数怎么使用？

20.如果使用Vue3.0实现一个Modal，你会怎么进行设计？

21.Vue3.0中Treeshaking特性是什么，并举例进行说明？

22. Vue3.0所采用的 Composition Api与Vue2.x使用的 Options Api 有什么不同？

23.Vue3.0性能提升主要是通过哪几方面体现的？

24.Vue3.0的设计目标是什么?做了哪些优化?

25.你是怎么处理vue项目中的错误的？

26.Vue项目如何进行部署？是否有遇到部署服务器后刷新404问题？

27.Vue项目中如何解决跨域问题？

28.Vue怎么实现权限管理？控制到按钮级别的权限怎么做？

29.大型项目中，Vue项目怎么划分结构和划分组件比较合理呢？

 

计算机网络题目预览：

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 分别有哪些使用场景？

17. Blob，ArrayBuffer，Base64 有什么区别?

18. TCP和 UDP的区别是什么?

19.Http 3.0是基于udp的，那么它是如何保证传输可靠性的？

20. 说下 websocket 的连接原理

21.https是如何保证安全的，又是如何保证不被中间人攻击的？

22. websocket 中的 Handshaking 是什么?

23. cookie 怎么设置只在 https 时携带？

24.HTTP1.0,HTTP1.1，HTTP2.0之间有什么区别？

25.DNS预解析是什么？怎么实现?

26.你知道哪些应用层协议?

27. TCP是怎么判断丢包的？

28.TCP和HTTP请求之间有什么关系？

29.从存储位置看，浏览器缓存分为哪几种？

............

 

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

27. TypeScript的主要特点是什么？

28.TypeScript中的方法重写是什么?

29.什么是TypeScript映射文件?

............

 

性能优化题目预览：

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.memoO和useMemoO的用法是什么，有哪些区别?

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两个属性有什么用途和区别？

............

破局锦囊

这波面试血战验证的真理：八股决定下限，场景思维决定天花板。当面试官把项目拆成乐高零件让你重新拼装时，真正要考察的是三个维度：

1️⃣ 技术辐射半径（能否用监控数据反推架构缺陷）

2️⃣ 抽象建模能力（如何把业务场景翻译成技术方案）

3️⃣ 决策颗粒度（为什么选Vite而非Webpack？量化到毫秒级构建差异）