2021阿里、字节、快手前端面经 & 个人成长经验分享
背景
本人背景渣渣,较晚入行,在一家公司稳定了三年,从一个前端白纸到如今乱涂乱画,已成雏形。2020 年年末,我离职了,因为深刻意识到自己有多 "菜",想专心花点时间提升自己。经过一点时间的调整,我重装上阵。由于节前时间有限,只投了几家,当然都是找人内推的。
阿里四轮技术+一轮 hr
一面 (60min)
-
自我介绍主要围绕几个点:个人信息、最近的公司职责和涉及的业务、主要技术栈、我擅长的技术、项目介绍(STAR:项目背景、任务、你的工作内容、项目亮点、结果你实现了什么学到了什么)、最近在做什么、结语。
-
简历里写了两个技术栈,所以讲讲 vue 和 react 的区别和联系吧主要围绕几个点:两者的模板渲染、两者的虚拟 dom、diff 差异(vue2、vue3、react 16)、react fiber 能解决什么问题、vue2 的响应式原理和 vue3 的响应式原理;vue 关于 Proxy 与 Object.defineProperty 的区别;两者的批量更新,还有路由差异、常用的优化手段、怎么进行数据通信、讲点新鲜的内容:新发布的 vue3 有什么特性、最后总结,谈谈两者的如今的生态……
-
项目的性能优化主要围绕几个点:项目技术栈的性能优化,比如使用 react 可以讲避免重复渲染的一些手段,比如 electron 可以将如何更接近原生;针对浏览器做的优化(你需要了解浏览器相关原理,比如缓存/存储、代理、SSR 等,针对渲染引擎的工作内容想到的优化,比如解析 css 解析会影响 dom 渲染、合成优化减少回流重绘、web worker、Event Loop 等);打包工具提供的优化,特指 webpack;针对具体的页面做的优化,比如首页该做什么,首页最新指标;最后讲讲应用场景、我的项目里用到了哪些方法,针对中等项目、大型项目的性能选择。PS:性能优化的内容如果认真讲,肯定两/三个小时下不来,因为性能优化没有终点,我面试时也只想到了上面的这些……
-
了解我们的产品吗?我提前 google 了团队的业务项目,之前也看过一些类似产品的文章,我结合自己的项目经验,说了一点理解,就几句话。
-
你想问什么?我问了本次的表现,了解了一些团队项目的工作内容、项目招人的背景、对于后续面试该做什么准备。一面没碰到手写题,都是很基础的问题,整体相对轻松。
二面 (60min)
晚上 9 点半的面试,面试官应该刚忙完,上来直接问业务,全程业务……权限页面的细节:
- 各个模块、按钮怎么设计权限;
- 分角色、分地域怎么设计?
- 要加个表头,还要控制展示的顺序,在各个浏览器表现一致,怎么设计?说出所有方案,想到什么自由发挥了……
- 聊到本地存储,问:localStorage 在各浏览器、移动端浏览器的 size 一致吗?
其他:
- 这一段是我简历的项目,略过……
- 继续聊阿里的产品,简单使用后,请提出几个可以优化的地方?
- 啥也没透露,让你预测下这款产品的接下来的方向,如果是你,你会着手哪个方向,并且凭啥让你来干,说下你擅长的……
- 正式讨论产品,大家都在做什么,团队协作的情况,公布接下来的迭代方向,针对的人群,目标……
- 照例闲聊,拜拜。
插曲:中间出现两次突然挂机,当时我的感觉就像过山车,从高空滑向低谷,整个心都是 ——某可爱漂亮的
央视记者—— 的。
三面 (60min)
这一面是笔试,哈哈,我复习了很多手写题,结果是完全与三面的考题完美岔开,没有交集,emmm……,好在并不难……题一:
/**
* 1.计算多个区间的交集
* 区间用长度为2的数字数组表示,如[2, 5]表示区间2到5(包括2和5);
* 区间不限定方向,如[5, 2]等同于[2, 5];
* 实现`getIntersection 函数`
* 可接收多个区间,并返回所有区间的交集(用区间表示),如空集用null表示
* 示例:
* getIntersection([5, 2], [4, 9], [3, 6]); // [4, 5]
* getIntersection([1, 7], [8, 9]); // null
*/
题二:
/**
* 2.DOM 的体积过大会影响页面性能,假如你想在用户关闭页面时统计(计算并反馈给服务器)
当前页面中元素节点的数量总和、元素节点的最大嵌套深度以及最大子元素个数,请用 JS 配合
原生 DOM API 实现该需求(不用考虑陈旧浏览器以及在现代浏览器中的兼容性,可以使用任意
浏览器的最新特性;不用考虑 shadow DOM)。比如在如下页面中运行后:
*/
<html>
<head></head>
<body>
<div>
<span>f</span>
<span>o</span>
<span>o</span>
</div>
</body>
</html>
// 会输出:
{
totalElementsCount: 7,
maxDOMTreeDepth: 4,
maxChildrenCount: 3
}
题三:
// 3.请使用原生代码实现一个Events模块,可以实现自定义事件的订阅、触发、移除功能
/*
const fn1 = (... args)=>console.log('I want sleep1', ... args)
const fn2 = (... args)=>console.log('I want sleep2', ... args)
const event = new Events();
event.on('sleep', fn1, 1, 2, 3);
event.on('sleep', fn2, 1, 2, 3);
event.fire('sleep', 4, 5, 6);
// I want sleep1 1 2 3 4 5 6
// I want sleep2 1 2 3 4 5 6
event.off('sleep', fn1);
event.once('sleep', ()=>console.log('I want sleep));
event.fire('sleep');
*/
业务四面 (35 min)
周末,人在梦游,刚下航母,就激灵灵接到电话,人还是糊的……
- 跨端的原理?我讲了几个例子:taro、uni-app,顺便提了 flutter、react native、小程序等的架构,具体怎么设计的。
- 动态表单能够运用在什么场景?我举了 7、8 个例子。
- 移动端适配相关的问题,应用场景。
- 我公司的业务讨论,是否了解过竞品等等,这里略过。
hr 五面 (60 min)
- 对于你项目的竞品有了解吗?说一下
- 你的项目与竞品相比,好在哪里,有什么优势?
- 下班后都在做什么,问的都是过往经历,问的太详细了,让人不舒服。
- 如果与同事发生了意见的不一致,你会如何解决呢
- 现在针对我们的业务,急需增加一个新的模块位置,你会怎么设计?数据怎么展示……
- 没错,hr 还问技术相关的问题。
整体感受
总体面下来没有让人紧张的感觉,中规中矩,从刚开始较高的心理预期到后面慢慢回落……由于我的水平有限,最终没有争取到多高的薪水。
快手二面挂
一面(60min)
- 自我介绍
- react 与 vue 的技术栈对比,说下区别
- B 端遇到的最复杂的数据结构是什么
- 快速实现 [1, 2, ...100],所有你能想到的解
- 数据展示的优化、数据截取和处理
- 实际场景中,哪些地方应用到了堆、链表、多叉树结构
- es6 及 es6+ 的能力集,你最常用的,这其中最有用的,都解决了什么问题。
- GC 相关问题:es6+ ,eventloop 中涉及 GC 的部分。
- 数组 flat 展开的各种解法,数组 map 应用
- 讲下 V8 sort 的大概思路
- Promise 并发限制
- 手写 Promise.all
- 省市区拼接查字段,要求 O(n) 内解出
- 中台的理解
- 讨论了下业务
- 个人发展方向
一面的问题循序渐进,前面为后面铺垫。
二面(60min)
- 项目的复盘优化
- 说下业务上最复杂的点
- node 限流算法
- 最有效的性能优化方法
- 你提到性能指标,能说说都是怎么计算的吗?比如 LCP,FID
- 算法题:数组全排列[1]
- 中台业务讨论
- 离职原因
大早上面试,状态不佳,全排列算是基础了,脑子里有解题思路,但死活没写对,面完后狠狠又手写了几遍。
猎豹移动三轮技术面+一轮 hr 面
技术一面 (60min)
- input type 都有哪些类型,还记得其他 attrs 呢
- css 的伪类和伪元素有哪些?有什么区别?
- 在一个未知宽度的父元素内如何创建一个等边正方形
- 异步加载 js 会阻塞什么
- 数组所有方法都有哪些?findIndex 的参数说明
- vue 和 react 的异同
- 如何优化 vue 框架,注意是优化框架
- vue 和 react 的 jsx 使用
- id key 真的能使列表比对更高效吗?举个反例?
- webpack 优化的手段
- tree-shaking 怎么配置,如何 避免 tree-shaking?
- electron 和小程序遇到什么坑?
- 说下微信自动化测试
- es2015 到 es2020 的新特性,你最常用什么,给你收益最大的。
- weakMap 和 Map 的区别,weakMap 原理,为什么能被 GC?
- 如何干扰 GC ?
- webpack import 动态加载原理
- 知道 webpack 中的 devTool 吗?
- 如何进行错误定位和数据上报,线上异常的处理
- 为什么有时候配置了 webpack caching,chunk 还是更新了?
- 讲讲浏览器和 node 的 eventloop
- 微任务后面还有哪些?requestAnimationFrame 是怎么调用的?requestAnimationFrame 帧内总是有任务吗?分情况说下。
- 帧数怎么计算?
- 了解网络安全吗?
- 如何避免数据被 iframe 截获
- 说下状态码
- 说下 304,什么情况会 304?协商缓存的头部字段?
- 你学习的渠道
- 工程化实践的看法
第一个问题没进入状态,我心里想怎么问这么简单的问题,我宕机了一会……后面就顺利了,面试官全程冷淡,也不闲聊。无趣,后来问了下,是猎豹的前端架构师,嗯,大佬就该有大佬的气场,面试体验棒棒的~~
业务二面 (60min)
大致内容:业务交流,工程化实践交流、猎豹前端在做什么,资源有哪些,他们的业务是偏 C 端的,未来的方向、发展等等……这一面很轻松,想到什么说什么,当然逻辑性肯定要有的。
业务三面 (70min)
这一面的面试官是猎豹移动的技术负责人。
- 项目是如何收集问题的,用户量如何?
- 性能问题如何排查,你们项目的指标,具体数据、截图发给我看看……
- 模块化是怎么实施的?
- 目录结构讲下
- 一些功能是自研还是使用第三方工具,叫什么名字,怎么使用 ?
- 疯狂问测试相关的内容,单元测试和组件测试是怎么做的、代码覆盖率多少,如何权衡测试原则,系统测试* 相关的内容,一些细节上的问题怎么处理,等等,要说出个 1、2、3 来 ?
- 项目亮点/难点,怎么解决 ?
- 复盘,整个项目总结,让你重新设计这套系统你会怎么做 ?
- 工程化实践和深入的一个点
- 团队氛围,有什么好的点可以说下,有什么不好的点也说下……
- 中台具体集成了什么功能 ?你都做了什么 ?
- 你是如何进行技术突破的,又是如何学习的 ?
- 对未来的规划
- 有什么问题想问?
我随便问了几个问题过渡,然后抛出最重要的一个,厚着脸皮让大佬指出我的问题(PS:这是我面试的目的之一,当时几个面试进度属猎豹最快了。别人眼中的我,在前端方面具体是怎样的感官 ?我一直很好奇。不是每个人都有一个对自己清晰的认识的,既然自己想不出来,那就通过面试吧)。
这次面试暴露的点:项目的总结、全局的把控、自我复盘都是有所欠缺的。另外不要给自己挖坑,有时候知道一些概念但不知道具体的实操和原理,还是别说了。当时,关于测试方面的问题,考官一直假装不懂,老是问:真的吗?这个我没做过,你给我讲讲吧?我原本没错的内容也被误导了,emmmm……
hr 四面(30min)
- 常规问题,没有阿里那么严格。
- 讲讲前任公司
- 离职原因
- 加班的看法
- 猎豹的福利
- 有没有其他 offer
- balabala……
字节跳动三面挂
技术一面(60min)
- 刚开始就问我的项目,问的很详细。
- webpack 提高构建速度的方式
- loader 输入什么产出什么 ?
- webpack 原理
- webpack 动态加载的原理
- webpack 热更新
- 如何写一个 webpack plugin
- AST 的应用
- 如何解析一个 html 文本,还是考 AST
- babel 原理,怎么写 babel 插件
- 如何设计一个沙盒 sandbox ?
- 小程序的 API 做了什么处理,能够做到全局变量的隐藏,如果是你,怎么设计 ?
- 基础题考闭包的,我讲对了思路,结果没做对。
- 实现颜色转换 'rgb(255, 255, 255)' -> '#FFFFFF' 的多种思路。
- 提供一个数字 n,生成一组 0~n-1 的整数,打乱顺序组成数组,打乱几次,如何能够看起来平衡,说出你能想到的所有方法。
- leetcode 239[2]
- 随便问环节,我问了考闭包的那道题,我没有做对。
这一面我准备了很多东西,结果又完美 miss。
二面技术 leader(60min)
- 业务,业务,还是业务,项目复盘有没有更好的解决方案。
- 如何处理一个重大事故 bug
- 监控体系
- 虚拟 dom 有什么好的地方?框架为什么要设计虚拟 dom?
- webpack 的缺点,让你设计一个新的构建打包工具,你会怎么设计?
- 在线文档编辑,如何处理两人的冲突,如何展示,考虑各种场景
- excel 文档冲突高级处理,文章冲突呢?是上个问题的深化。
- 基础题,直接写出答案:
let x = [1, 2, 3];
let y = x;
let z = [4, 5, 6];
y[0] = 10;
y = z;
z[1] = 20;
x[2] = z = 30;
console.log(x, y, z);
- 基础题:leetcode 300[3]
- 随便问环节
三面业务 leader(60min)
- 算法题:从数组 [1, 5, 8, 10, 12] 中找到两个数和为 9,返回 [1, 8] 这样的结果。
- 算法题:从数组 [1, 5, 8, 10, 12] 中找到三个数和为 19,返回 [1, 8, 10] 这样的结果。
- 算法题 leetcode 300[4]:给定一个无序的整数数组,找到其中最长上升子序列的长度。
- 针对我的项目提问,大概 40 分钟吧,脑子乱。
- 没有随便问环节,我差不多有预感了。
是的,我的字节面止步于此了,这一面算法没有难倒我,基本上看到题目我就能想出解法。三面挂的原因是我简历上的项目太简单了,你想要真实,我给你真实,可惜你看不上这些真实(这次面试我的简历没有准备好是一大原因,各位,我就是你们的前车之鉴啊!)………
个人经验分享
这个应该是各个面经的保留节目了,我也在此留下笔记。主要分两个方面来讲,一个是前端技术的学习,另一个是面试当中需要注意的点。
准备阶段
-
看源码,整理 Vue 与 React 框架的所有横向对比,包括渲染原理、虚拟 dom、diff、patch、fiber、批量更新,手写响应式,框架用到的模式、设计思想,性能优化,相关生态技术等等。
-
webpack 原理、热更新原理、动态加载原理、常见 plugins、loader、常见优化,怎么打包、怎么分 chunk,怎么写一个 plugins,生命周期,微内核源码等内容,以及 rollup、gulp 的使用、应用场景。(我记得有一面一个考官对我说,你对整个研发流程都很清楚,但都并不深入,比如一个 webpack 打包分包的依据怎么判定……emmmm,我倒是会,你也不问我啊!)
-
跨端框架的研究,工程化的梳理,使用的技术栈的坑,移动端的一些实践,面试时额外准备的项目复盘,竞品调查,对方产品的资料,测试系列,还有很多如微前端、中台、serverless、可视化、Wasm 等就不举例了。
-
除此之外,我也看了很多面经、以及技术文章。
我把看过的面试题做了一个汇总整理,居然有280页PDF,无偿分享给大家,算是一个感恩回馈吧,有需要的朋友【点击我】无偿获取。
点击此处蓝色字体280页《前端校招面试真题解析大全》查看详细内容。
掌握了以上内容,我们应该算是有一点知识广度了也能从容地应对前面的技术面了,当然,这不是短短几个月就能达成了,要时间的积累,那些一年就资深的牛人也是在大学甚至更早的时候就开始积累的,这一关逃不掉。
到此,“技术面” 这只老虎应该能打个半死,直接干倒是不可能的,以上的知识对于校招可能足够,但社招不一定用的上,哈哈。
然后就是社招的重点:业务面,怎么说呢,就是多思考多总结吧,深入思考,对每个问题一定要有深入的思考,不然就很难进入大公司了,深度上要有一个拔高才能在面试中获得好的成绩。
挑出你项目中的亮点,要被别人认可的亮点,这个比较难,各位只能自求多福了,也是我本人的短板,当时也是鸡蛋里挑骨头,这是我这次找工作遇到的最大拦路虎,业务太简单,你眼中的亮点面试官觉得不是……
面试阶段
很多面经都说回答问题时,思考一下再回答,为了组织语言,但有时候,你明明懂,在紧张的情况下反而会将关键信息跳过,答的让人不知所云。要做到:“想清楚,说明白,知道说什么,怎么说”,还是有一点难度的,关系到平常一点一滴的积累,这方面我上面已经提供了一点方向。剩下的就是面试阶段好好发挥了,没什么太好的办法,我这里建议:
- 回答问题前思考一下,虽然不保证有用,但还是要好好履行的。
- 多面几次,指的不同公司,只要你不嫌累。
- 在面试某一家公司时,根据前面的面试,尝试推测后续考官会问到的业务的大致范围,或者问内推同学,提前做准备。一般会问:1 你简历上的项目,2 对方部门知名的产品,3 招聘 jd 上的 title。
- 简单的复盘,保证别倒在同样的问题上。
- 增加知识的广度,可以引导向别的问题,考官也是乐意听的。
- 挑个面试的好时间,比如我本人,早上 10 点我的脑子无比灵光,说话都带着沉稳富有磁性……晚上 7 点后,就会莫名紧张,声音分贝提高几个点略微沙哑,这个真的因人而异。有时候沉稳不一定是好事,紧张反* 倒促使你偶有妙语和想法,当然也可能搞砸。
- 找几个方法迅速调整好你的精气神,在前面基础学习的时候也可以用上。
- 如果你够厉害,可以适当暗示和引导面试官问些你擅长的,千万不要被牵着鼻子走。
最后,拜佛烧香,求个好运。人和人的差异,在于认知和思考力的差异。假如你一时之间思维没有一个质的变化,不如求个好运。没有一个好的运气,上面的建议可能通通都不好使,毕竟社招面试内容本身就是不稳定的,有的重技术、有的重算法、有的重业务、有的重学历、有的重眼缘……
如何坚持学习?
这一块算是补的,我依然只给建议:
- 如果你玩游戏的话,请放弃游戏,或者戒掉一段时间,直到找到满意工作。
- 找到你的痛点。
- 分段学习,制定符合周期的计划。不要逼着自己,否则压力会让你崩溃的。
- 找点鸡汤,或者去找点你没有但渴望得到的东西。
- 业务方面,多看点书,多总结积累一些思考方式。
最后灵魂一问:
- 你的梦想是进大厂吗?你明白的,这需要一点小小的代价。
- 你是万中无一的奇才?如果不是,那么失败几次是正常的,大家都是普通人,也许只是不 match。
最后
文章到这就结束了,我的水平有限,我也不知道这篇面经能够拯救几个娃,相信很多人跟我一样都会有一个进大厂的梦吧。春招将至,希望大家都能在春招当中拿到自己满意的 offer。最后,能看到这里的小伙伴顺手点个赞吧。