五年前端的大厂面经
大家好，我是刘布斯。
今天给大家分享一篇最新的面经，作者是一位有着 5 年前端开发经验的工程师，面试的也是一些大厂，相信能对找工作的同学有所启发。
以下是原文：
每一家的面试风格都不一样，但基本上除了开放问题都不会脱离简历。
问答方面：大部分一面基本功二面项目三面开放，但也有二面三面基本功一面项目的。 笔试方面：大部分只有一面做题，也有例外的。
基本功
建议大家一定要把简历上所有提到的技术（或者实现的功能用到的技术）都能知道：
为啥用它（技术选型） 它的怎么做的（原理） 怎么用它更好（优化）
钉钉
小程序和 h5 架构上有什么不同？
资源很大，如何尽快显示第一屏页面？
如何监测性能，上报等？
虚拟列表 item height 不定怎么办？
vite webpack 优缺点对比？
vue react 异同？
小红书
tailwind 优点
tailwind 预设的样式很多会不会包很大？
tailwind 原子类名负责单一属性，假设我想 font-weight、font-size 结合用一个类名怎么做？
前端性能优化？
项目主要考察怎么做，细节到代码怎么写的
从客户端和服务端角度说一下鉴权（用 cookie 讲故事）
httponly 是干嘛的
响应式怎么做
追问 除了 rem、vw 还有啥（我猜面试官是想问如果布局改变应该怎么做所以答了媒体查询）
React 和 Vue 逻辑复用，用啥
React 的 hook 为啥不能放入类似 if else 的代码块
React 性能优化（我是从用一些 hook 的角度答的）
React 和 Vue 的 Router 作用、原理（我是从用浏览器 API 角度答的）
webpack 优化
vite 如何处理 commonjs
esbuild 和 webpack 区别
webpack 的 loader、plugin
git 的 merge 和 rebase 啥区别
1688
对前端工程化的理解
小程序为什么有平面检测的能力
css 盒模型
css 定位
变量提升
网页渲染过程
前端性能优化
浏览器缓存
React 比以前的 html+js 那种好在哪里
为啥用函数式组件
为啥要用 hook
hook 为啥不能用在条件语句
hook 为啥用链表结构
从 jsx 到渲染到屏幕的过程
为啥要用虚拟 dom
Vue 用虚拟 dom 了吗
蚂蚁
从 jsx 到渲染到屏幕的过程
谈一谈 diff 算法
场景问题：比如支付宝开福，从前端角度如何优化来提高用户体验，提示点：开福不考虑先来后到
小程序和 h5 不同
小程序架构设计
小程序为什么是双线程，这样的优点和缺点
字节
3d 项目中的性能优化？
提到 GC，讲讲 js 中的 GC
threejs 中如何实现拾取？
three 在射线检测中做了哪些优化提高检测效率？
射线检测还有哪些手段？不限于 three 做的，也不限于软件
webgl 渲染流程？
webgl 中的深度测试和模版测试？
前端生成海报的时候，用了什么库，原理是什么？
出现跨域的资源怎么办？
base64 为什么比 png 大？
长列表怎么性能优化？
用虚拟列表有哪些需要考虑的点，怎么做的？（高度不定情况、留 buffer 空间）
前端的性能指标知道多少？
跨标签页通信的方式有哪些？
postMessage API 能跨域吗？
如果需要跨设备通信呢？
子组件是一个 Portal，发生点击事件能冒泡到父组件吗？
能冒泡是基于什么原理呢？
W3C 冒泡顺序？
mouseEnter 和 mouseOver 有什么区别？
不会冒泡的事件有哪些？
js 的模块系统？
异步加载一个模块的方式？
webpack 中异步加载模块的方式？
tree-shaking 有什么要求吗？
项目
就不分开写了，很多重复。主要概括为几个方面吧：
项目背景和竞品分析：如果是基建类型的话，一定要分析好这点。 项目的体量、迭代：这个其实是我的弱点，长周期的项目体量不大，技术也不难。 项目中的难点和解决，解决后数据量化：建议大家自问自答，回答难点的时候要清晰流畅。 项目中的性能监控、性能优化：五年经验嘛，性能优化是必备了每家都很关注，最好是要有成熟的性能优化思路和完整的工作流。 项目后续规划：自己的规划，也有可能面试官想到后续问题问你咋解决，所以大家多多预设问题呀
每个公司侧重点不一样，有的是通过解决思路看你这人、有的是通过做的过程看你的技术深度、有的是看项目本身牛不牛
如果你刚好是有大型的项目，遇到了性能瓶颈，有一个完整成熟的解决，优化后数据指标亮眼。那就成了！
开放问题
一般必问的是：
平时如何学习 关注新动态的方式、结果 职业发展规划 离职原因
还有一些会根据经历不同去天马行空的聊天一下，比如我做 3d 项目（纯纪念，没参考价值）
3d 项目工作流
vision pro 和 3d 结合相关
unity、unreal 和 3d 模型
模型格式，json 文件描述信息
笔试
我遇到的都是简单题目，感觉刷一下 leetcode 经典题目和前端题目就够用了，但可能是因为我年前面的面试官知道我没空刷题所以简单
钉钉
笔试题 1：失败重试，200ms 试一次，500ms 试一次。还不成功就返回失败 笔试题 2：找出字符串中连续重复次数最多的字符，输出该字符，开始位置，结束位置
小红书
做题 1
//写一个group函数可以对数组进行分类，接收一个函数作为参数，返回一个对象.
//调用如下
array = [0,1,2,3,4]
ruleFn = (item,index,array)=>{
return item%2==0？"odd":"even"
}
array.group(ruleFn)
//结果如下
{odd:[1,3],even:[0,2,4]}
做题 2（没要求必须做出来，说思路）
// 判断括号是否闭合
“{}[]” 、“（[]）”、“{}[]（【】）”这几种都是闭合的，其他不算闭合
做题 3
//计算乘积除以当前项
//传参 [1,2,3,4]
//输出 [24,12,8,6]
蚂蚁
做题 1
节流防抖：比如 10 秒连续输入，每 2 秒响应一次
做题 2
//数组拍平 flatternArray(arr,count)
flatternArray([1, 2, 3, [4, 5]], 1); //[1,2,3,4,5]
flatternArray([1, 2, 3, [4, [5]]], 1); //[1,2,3,4,[5]]
做题 3
//实现 lastPromise，连续请求只有最后一次输出
let lastFn = lastPromise(promiseFn); //promiseFn 是一个普通的异步函数，返回一个 Promise
lastFn().then(); //无输出
lastFn().then(); //无输出
lastFn().then(); //有输出
字节
做题 1 实现 get 方法
var obj = { a: { b: { c: 2 } } };
console.log(get(obj, "a.b.c")); // 输出 2
做题 2 把数组平分，实现 fn
fn([1, 2, 3, 4, 5], 2); //结果为[[1,2],[3,4],[5]]
做题 3
//二叉树的右视图
体验
钉钉
笔试和其他的不一样：一面问答和笔试是分开两天的，笔试给了 1.5 小时，并且不全程看敲代码，心理压力小很多。 三年后的首面，准备不充分，也紧张。面试官属于鼓励型，我每次回答他都说“了解，明白”，哈哈哈哈。 挂了之后钉钉上问原因和建议，面试官也说了，nice
小红书
一面印象很深刻有好几个点，面评很好，面试官也很nice。刚面完就约二面了。
问项目功能点实现最细的，到代码，其他基本上都是问到思路。 这个面试顺序 ①tailwind 和项目 ② 做题 ③ 继续问 js 有意思。 尾声把心里没底的和面试官复盘了一下，面试官很有耐心然后也给予了肯定。
从一面到二面可以说是从天上到地下：整个过程比较难受了，因为项目不对口。面试官看的是大型长久，我看的是个人成长。面试官反复纠结为啥我作为重点的项目是一个短期的项目，我想说短期但是它最难啊。 hr始终不反馈，让我觉得很不专业。
1688
给自己总结四个字：一路顺风。
给1688整体流程五星好评。
蚂蚁
好像比较喜欢善于总结的，提到掘金发文眼睛一亮哈哈哈 一面那天刚好是准备✈️回家，面完就提行李箱走人哈哈哈 一面100分钟是我没想到的，但是聊得很开心。二面的时候设备不足只能电话面试，也表示理解。面试官5星好评。 二三面竟然问了一些基本功，special
字节
二面面试官是个以前实习时候的同事，hh 字节整体反馈也快，给 hr 点赞
心路历程
面试挺让人成长的，不论是基本功还是项目，而且也更知道市场需要什么人了。
自己还是幸运的，没想到在这个互联网寒冬能够面试还挺顺利的。虽然自己是被广进计划了，但反而更自信了。
结果也满意。回顾一下，整体是大调和弦，当然也有一个小遗憾和一些小不爽。
最后
还没有使用过我们刷题网站（https://fe.ecool.fun/）或者刷题小程序的同学，如果近期准备或者正在找工作，千万不要错过，题库主打无广告和更新快哦~。
老规矩，也给我们团队的辅导服务打个广告。
原文地址：https://juejin.cn/post/7341288345782353961