2024前端40+场面试|实战盘点

331 部门架构调整，拥抱变化 拿到大礼包

从 2 月末一面 到 3 月末offer，历时两个月

• 阿里钉内网问了30人+，投递 20+次
• boss、内推公众号等 问了650+次，投递 70+简历
• 2 个月 面试场次 40+

一、面试时间线

绿色背景为面试通过，后面进程没推进原因写在备注了

以下只是部分有记录的，肯定少写了一些

 

• 前期面了很多阿里系的部门，也是想利用还能用阿里钉多问问，但是整体下来 大部分的 hrg 卡学历（211 起步），后面阿里系的就直接不投不面了

• • 其中一面、2 面至少有 4-5 个部门是过的 ，然后被 hrg hold 流程了，很寒心

• 前期杭州除了阿里系 其他机会太卷了，于是后面公司基本只面上海 的

二、面试核心问题（不区分公司）

以下未总结全、一些偏门问题没有纳入

一、vue|react框架与库

1. Vue 和 React 区别
2. React 中点击一个按钮页面卡顿有哪些可能性
3. Hook 底层原理
4. Fiber 原理
5. 不同版本的 React 有哪些优化
6. React 的并发优化
7. React 组件通信
8. Redux 通信、redux的中间件
9. 实现 Redux 的 hook 说下思路
10. 介绍 react16-18 每一版的更新，并解释为什么更新
11. react19 主要想优化什么
12. react没有 fiber 之前优化哪些问题
13. 不同组件内容没变都有 key 但是顺序变了是否重新渲染
14. fiber 更核心的细节 fiber 分为哪些阶段 每个阶段干了什么事
15. fiber 中 useEffect 哪个阶段 干了哪些事 执行力什么
16. useLayoutEffect 和useEffect区别，
17. useEffect怎么实现异步的
18. useEffect 不写第二个参数的 场景和使用
19. react 中 setState 后发生了什么

二、渲染机制与算法

1. 页面渲染机制
2. 从输入 url 到页面渲染发生了什么 并根据不同阶段给出优化建议
3. 虚拟 DOM 说明
4. Diff 算法
5. 虚拟 DOM

三、性能与优化

1. Webpack 全流程 优化、Plugin、Loader 怎么做的
2. Webpack 打包优化
3. react 全流程优化
4. react、webpack 全流程优化
5. 怎么让打包小一点
6. 怎么让 webpack 更快
7. 前端监控指标 FID、FCP、CLS、LCP 等代表什么 怎么监控怎么优化

四、手写

1. 手写防抖
2. 手写给出 2 个对象判断是否一个是另一个子集
3. 手写 求对象、数组的深度
4. 手写重复子串问题
5. 手写大数相加
6. 解释微任务 宏任务
7. 微任务排序 并解释微任务
8. 协商缓存和强缓存
9. 手写实现 eatMan、Lazyman
10. 手写控制最大并发
11. 手写 ajax 实现 promise
12. 手写 hook 实现 监听 div 宽高
13. 手写diff算法（给你新虚拟 dom、老虚拟 dom、页面真实 dom）手写 diff 实现最小策略更新页面 dom
14. 最长公共后缀 要求复杂度

五、前端工程与架构

1. 介绍项目的难点
2. 介绍项目的架构
3. 画项目架构图
4. 前端模块化发展历史
5. common.js 和 es6 的区别
6. 前端工程做了哪些事

六、其他

1. Ice 底层 SSR 怎么做的 SSG 怎么做的
2. 低代码怎么接入 Vue 的写法
3. 幽灵依赖是什么
4. pnpm、yarn 是什么原理是什么
5. npm run serve 发生了什么
6. 怎么实现复制带样式
7. 怎么实现文字中文字母输入过程中默认有空格
8. 低代码状态怎么管理、事件怎么串联起来的
9. 一个长期维护的项目如何实现可维护性 综合说明
10. 一个服务端项目 经常浏览器白屏 怎么解决，老项目不兼容的api很多
11. 纯 js 如何检查当前页面是否白屏
12. 纯 js 如何实现检测当前可视区域渲染完成
13. 函数式编程
14. 什么是副作用

三、总结-面试前基础准备

根据我 2024 年 40+次的面试时间线，很明显能看出来，后半段的面试，基本都能过，主要是 4 月份离职状态有充足时间复习了，所以我总结一下心得

(一) 资料整理

• 要不网上找最近 1 年的八股文，要不自己找最近 2 年题目，自己归纳总结答案。
• css、webpack、计算机网络这些 几年没变的东西可以 copy 高赞总结来背
• 网上面经重点是看问的问题而不是答案

这里我入了大坑，之前背书图省事，网站找 pdf、或者掘金找高赞文章背 react，结果这些都是 2，3 年前的东西

react 17 事件池都取消了，这些资料还在说事件池的好处，对于 react、vue 最新的资料一定自己总结搜索，

就是你自己找到计算机网络的东西，请记住必须先理解再背诵。

背书占你复习时间 10%都不到，学习和理解能找到 70-80%

总结知识多问为什么？ 寻根问底才能更好掌握，比如为什么有 promsie？为什么有 await ？为什么要有事件机制？为什么事件机制分宏任务和微任务？ 为什么 promis额 归为微任务，setTimeout 是宏任务呢？

最后：你要保证 ，你总结的所有知识点 都是你理解透彻总结的，而不是 copy 外面来背诵的，

第一性原理背八股文

(二) 资料整理途径多|广

• 多用大模型帮你理解知识，比如通义千问、文心一言、chatgpt
• 多使用抖音、b 站 找视频帮你学习 比如 http2、http3 为什么出现，有些3 分钟 b 站视频 ，比你自学 2 天还能让你透彻

(三) 八股文必须过一遍再面

想投简历面试了，先找个最近的面经问问自己 80%都能说出来吗，不能就滚回去背书，别浪费机会

• 任何面试前八股文是一定完全过一遍
• 大部分八股文不是背书，而是先理解，抓住核心点

• • 举例，http2 出现核心解决了 http1 的 http 队头堵塞，http3 核心解决 http2 的 tcp 堵塞，必须充分理解核心知识点，你再延展背诵其他东西

(四) 手写题

手写题分为三种

• js 实习一些功能方法（控制并发、防抖、节流...，数组转树、树转数组)
• 给一段代码清除输出（考察事件循环、this 的使用、构造函数等）
• leetcode 算法或相关变种

(五) 算法题

如果想尝试中大厂，leetcode hot 100 是必须要过一遍的,其次 codetop 勾选公司字节、按照频率排序，前 50 必刷的

起码你刷 50 题之后再开始面中大厂吧 ，不然就是浪费机会

(六) 搞透自己的项目

无论什么公司，总有 1-2 面肯定是深挖你的项目的

• 我项目核心难点|亮点是什么

• • 什么是项目难点？ 你google可能都搜不到答案的点

(七) 垃圾技术栈不要写

一些基础的技术栈最后不要强调，但是如果该岗位 jd 有要求，那 针对这个公司添加这个

• uni-app
• router 路由钩子
• axios
• 后台管理 权限控制

(八) 准备多份简历

总结你最近几年的 项目经验按照技术栈、业务方向 大概能分成几大类

• PC 端 web 页
• h5 移动端
• 低代码
• 混合开发
• 小程序开发
• 股票行情业务开发
• 资讯类开发
• 团队管理能力
• 架构设计案例
• C 端移动端、pc 端页面
• B 端管理平台
• AI 产品相关

为什么要分类，因为不同的岗侧重点不同 你可以根据岗位按需投递

如某岗 招人就是纯粹 C端开发，那你写 C端开发就在简历筛选中 胜过写 后台管理的人

(九) 面试时间

• 尽量约在上午 11 点、下午 3-5 点，晚上 7，9 点
• 早上太早面试官也难受，下午太早 昏昏欲睡，最后饭点后的 1h

四、总结-面试前项目

首先请使用一下 4 点 自己总结一遍

1. 背景
2. 目标 期望目标（往往是比较模糊的）
3. 行动 （具体哪方面）
4. 结果（需要有实际案例和量化指标支撑）

每一个项目都要有项目亮点，并且要知道底层原理

哪怕你某个项目用了一点点微模块，那你微服务、微应用相关的知识必须熟练，不然这个项目不要写出来

• 项目亮点就是你在网上几乎搜不到的东西，比如我对渲染引擎做了优化，白屏检测做了插件
• 如果一个项目你找不出任何亮点和难点，那么不要出现在你的描述|项目中，不然就是你的减分项

未完待续...

五、总结-面试中

自我介绍 5 分钟以内解决 主要以下核心信息

• 基础信息 姓名、毕业时间、第一份工作（如果经历多 只说明最近 1-2 份工作）
• 最近一份工作，是干什么的，你的职责是什么，你职责下干了哪些具体的事，有什么产出

(一) 常见面试流程

一面（基本筛选，是否符合）

目前远程面试，很多公司一面属于筛选面

• 【问你的简历所有内容，主要项目经历】 看你的经历是否属实，因为约你面试就说明你简历项目 他们是认可的
• 【问八股基础】常见的 react+webpack+计算机网络+纯 js 闭包、事件循环等

也存在一些公司，一面是老板指派小弟进行海选的流程，问你什么全看 这个面试官想问什么，没有固定套路，可能全八股、可能全项目、也可能写半小时笔试题

二面（深度探测，级别是否达期望、方向是否类似）

二面基本属于你的直系主管、有些公司是一面小主管面。二面的问题可能一面也问过，二面主要是深度面

三面（大概率不是前端技术栈的老板）

很多场景题，比如我现在有个网页经常白屏 换做你 怎么办呢 后面我会出文章专门描述，你的项目中的角色，遇到 hr 问题怎么处理，设计模式相关问题

hr 面

其实面试 也是一门玄学，有些回答问题 80%都回答很好，结果前面某个问题回答的面试官不满意，可能就挂了，有时候二面主管面，纯粹就是看你眼缘，觉得你够聪明，问的深度恰好你做过那就好办。

(二) 宏观问题要回答细致 总分总模式

先总结该功能，再细化改功能，最后再总结下

如果是宏观的面试题 最好说的细致一点，正常面试都是 1 小时，你的任务就是 1 小时内尽可能说自己会的东西，你回答的过于简练,反而让面试官觉得你理解不够深刻，同时增加时间问你更多问题，问题越多 你不会的可能越大

常见宏观问题

• 从输入 url 到页面解析出来发生了什么
• 说说fiber架构的理解

(三) 知识点要串联起来

比如问你解释下宏任务微任务，你提到以下内容，会不会效果不一样

• 解释 js 引擎和渲染引擎在宏任务微任务扮演的角色，
• 宏任务和微任务都空了会发生什么
• JS 单线程带来的好处
• Web Workers 中的宏任务和微任务处理

比如问你fiber 架构你提到以下内容，会不会效果不一样

• react 18 的并发模式
• fiber 是如何处理 useEffect 的
• fiber 和计算机的运行原理

(四) 投降输一半

如果问了一个你完全不知道的问题，不要瞎扯，老实说 这块你不够了解。

如果你还是把你知道的几个词扯起来结果牛头不对马嘴 ，或面试稍微质疑或者细化问题 那不就是 gg

比如：让你写个算法题，你 3 分钟还没一点思路，那就赶紧投降 让面试官换一题。

比如问你 ts 的问题，你真不熟别撑着，就说项目用得少。

六、总结心得-面试后

1、目前这么多面试 ，面试后再次联系我二、三面 的基本不会超过 2 个工作日，如果 3+个工作日没联系你，那大概是凉了

2、面完后 思考 为什么问你的一些问题 因为这些问题 很可能和你的简历有关，但是你没准备这么写，就需要你再记录总结。

七、附：面试资料整理

面试准备三大块

• 项目
• 八股文和基础
• 手写题和算法

项目见我写的第四章

(一) 手写题

js 手写刷题 top18 题

1. 防抖节流
2. 柯里化
3. promise 手写
4. hook 手写
5. apply、call、bind
6. 发布订阅模式
7. 观察者模式
8. 深拷贝
9. 判断数组、对象深度
10. 实现一个EatMan
11. 实现 LazyMan
12. 控制最大并发数
13. 实现 loadsh.get
14. 链式调用
15. 数组转树
16. 树转数组
17. 对象、数组扁平化

算法top38

1. 2.两数相加
2. 3. 无重复字符的最长子串
3. 88. 合并两个有序数组
4. 165. 比较版本号
5. 53. 最大子数组和
6. 112. 路径总和
7. 20. 有效的括号
8. 46. 全排列
9. 415. 字符串相加
10. 129. 求根到叶子节点数字
11. 54. 螺旋矩阵
12. 121. 买卖股票的最佳时机 122. 买卖股票的最佳时机 II
13. 15. 三数之和
14. 200. 岛屿数量
15. 141. 环形链表
16. 102. 二叉树的层序遍历
17. 215. 数组中的第K个最大
18. 5. 最长回文子串
19. 206. 反转链表
20. 209. 长度最小的子数组
21. 695. 岛屿的最大面积
22. 70. 爬楼梯
23. 42.接雨水
24. 4.寻找两个正序数组的中位数
25. 14.最长公共前缀
26. 1768. 交替合并字符串
27. 27.移除元素
28. 128.最长连续序列
29. 28.找出字符串中第一个匹配项
30. 11.盛最多水的容器
31. 49.字母异位词分组
32. 21. 合并两个有序链表
33. 704.二分查找
34. 26.删除有序数组中的重复项
35. 56.合并区间
36. 18.四数之和
37. 22.括号生成
38. 560. 和为 K 的子数组

前端 2024 算法题库(未完待续)

前端面试-js-手写代码原理

(二) 八股文

我是按照如下分类去准备的 ，其中我圈出来的核心重点

具体内容可看我主页其他文章，有空我会整理贴出来