331 部门架构调整，拥抱变化 拿到大礼包
从 2 月末一面 到 3 月末offer，历时两个月
- 阿里钉内网问了30人+，投递 20+次
- boss、内推公众号等 问了650+次，投递 70+简历
- 2 个月 面试场次 40+
一、面试时间线
绿色背景为面试通过，后面进程没推进原因写在备注了
以下只是部分有记录的，肯定少写了一些
- 前期面了很多阿里系的部门，也是想利用还能用阿里钉多问问，但是整体下来 大部分的 hrg 卡学历（211 起步），后面阿里系的就直接不投不面了
-
- 其中一面、2 面至少有 4-5 个部门是过的 ，然后被 hrg hold 流程了，很寒心
- 前期杭州除了阿里系 其他机会太卷了，于是后面公司基本只面上海 的
二、面试核心问题（不区分公司）
以下未总结全、一些偏门问题没有纳入
一、vue|react框架与库
- Vue 和 React 区别
- React 中点击一个按钮页面卡顿有哪些可能性
- Hook 底层原理
- Fiber 原理
- 不同版本的 React 有哪些优化
- React 的并发优化
- React 组件通信
- Redux 通信、redux的中间件
- 实现 Redux 的 hook 说下思路
- 介绍 react16-18 每一版的更新，并解释为什么更新
- react19 主要想优化什么
- react没有 fiber 之前优化哪些问题
- 不同组件内容没变都有 key 但是顺序变了是否重新渲染
- fiber 更核心的细节 fiber 分为哪些阶段 每个阶段干了什么事
- fiber 中 useEffect 哪个阶段 干了哪些事 执行力什么
- useLayoutEffect 和useEffect区别，
- useEffect怎么实现异步的
- useEffect 不写第二个参数的 场景和使用
- react 中 setState 后发生了什么
二、渲染机制与算法
- 页面渲染机制
- 从输入 url 到页面渲染发生了什么 并根据不同阶段给出优化建议
- 虚拟 DOM 说明
- Diff 算法
- 虚拟 DOM
三、性能与优化
- Webpack 全流程 优化、Plugin、Loader 怎么做的
- Webpack 打包优化
- react 全流程优化
- react、webpack 全流程优化
- 怎么让打包小一点
- 怎么让 webpack 更快
- 前端监控指标 FID、FCP、CLS、LCP 等代表什么 怎么监控怎么优化
四、手写
- 手写防抖
- 手写给出 2 个对象判断是否一个是另一个子集
- 手写 求对象、数组的深度
- 手写重复子串问题
- 手写大数相加
- 解释微任务 宏任务
- 微任务排序 并解释微任务
- 协商缓存和强缓存
- 手写实现 eatMan、Lazyman
- 手写控制最大并发
- 手写 ajax 实现 promise
- 手写 hook 实现 监听 div 宽高
- 手写diff算法（给你新虚拟 dom、老虚拟 dom、页面真实 dom）手写 diff 实现最小策略更新页面 dom
- 最长公共后缀 要求复杂度
五、前端工程与架构
- 介绍项目的难点
- 介绍项目的架构
- 画项目架构图
- 前端模块化发展历史
- common.js 和 es6 的区别
- 前端工程做了哪些事
六、其他
- Ice 底层 SSR 怎么做的 SSG 怎么做的
- 低代码怎么接入 Vue 的写法
- 幽灵依赖是什么
- pnpm、yarn 是什么原理是什么
- npm run serve 发生了什么
- 怎么实现复制带样式
- 怎么实现文字中文字母输入过程中默认有空格
- 低代码状态怎么管理、事件怎么串联起来的
- 一个长期维护的项目如何实现可维护性 综合说明
- 一个服务端项目 经常浏览器白屏 怎么解决，老项目不兼容的api很多
- 纯 js 如何检查当前页面是否白屏
- 纯 js 如何实现检测当前可视区域渲染完成
- 函数式编程
- 什么是副作用
三、总结-面试前基础准备
根据我 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 点 自己总结一遍
- 背景
- 目标 期望目标（往往是比较模糊的）
- 行动 （具体哪方面）
- 结果（需要有实际案例和量化指标支撑）
每一个项目都要有项目亮点，并且要知道底层原理
哪怕你某个项目用了一点点微模块，那你微服务、微应用相关的知识必须熟练，不然这个项目不要写出来
- 项目亮点就是你在网上几乎搜不到的东西，比如我对渲染引擎做了优化，白屏检测做了插件
- 如果一个项目你找不出任何亮点和难点，那么不要出现在你的描述|项目中，不然就是你的减分项
未完待续...
五、总结-面试中
自我介绍 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 题
- 防抖节流
- 柯里化
- promise 手写
- hook 手写
- apply、call、bind
- 发布订阅模式
- 观察者模式
- 深拷贝
- 判断数组、对象深度
- 实现一个EatMan
- 实现 LazyMan
- 控制最大并发数
- 实现 loadsh.get
- 链式调用
- 数组转树
- 树转数组
- 对象、数组扁平化
算法top38
- 2.两数相加
- 3. 无重复字符的最长子串
- 88. 合并两个有序数组
- 165. 比较版本号
- 53. 最大子数组和
- 112. 路径总和
- 20. 有效的括号
- 46. 全排列
- 415. 字符串相加
- 129. 求根到叶子节点数字
- 54. 螺旋矩阵
- 121. 买卖股票的最佳时机 122. 买卖股票的最佳时机 II
- 15. 三数之和
- 200. 岛屿数量
- 141. 环形链表
- 102. 二叉树的层序遍历
- 215. 数组中的第K个最大
- 5. 最长回文子串
- 206. 反转链表
- 209. 长度最小的子数组
- 695. 岛屿的最大面积
- 70. 爬楼梯
- 42.接雨水
- 4.寻找两个正序数组的中位数
- 14.最长公共前缀
- 1768. 交替合并字符串
- 27.移除元素
- 128.最长连续序列
- 28.找出字符串中第一个匹配项
- 11.盛最多水的容器
- 49.字母异位词分组
- 21. 合并两个有序链表
- 704.二分查找
- 26.删除有序数组中的重复项
- 56.合并区间
- 18.四数之和
- 22.括号生成
- 560. 和为 K 的子数组
前端 2024 算法题库(未完待续)
前端面试-js-手写代码原理
(二) 八股文
我是按照如下分类去准备的 ，其中我圈出来的核心重点
具体内容可看我主页其他文章，有空我会整理贴出来
-
- 我项目核心难点|亮点是什么
-
-
- 前期面了很多阿里系的部门，也是想利用还能用阿里钉多问问，但是整体下来 大部分的 hrg 卡学历（211 起步），后面阿里系的就直接不投不面了
