背景

本人背景渣渣,较晚入行,在一家公司稳定了三年,从一个前端白纸到如今乱涂乱画,已成雏形。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 分钟吧,脑子乱。
  • 没有随便问环节,我差不多有预感了。

是的,我的字节面止步于此了,这一面算法没有难倒我,基本上看到题目我就能想出解法。三面挂的原因是我简历上的项目太简单了,你想要真实,我给你真实,可惜你看不上这些真实(这次面试我的简历没有准备好是一大原因,各位,我就是你们的前车之鉴啊!)………

个人经验分享

这个应该是各个面经的保留节目了,我也在此留下笔记。主要分两个方面来讲,一个是前端技术的学习,另一个是面试当中需要注意的点。

准备阶段

本来想先介绍简历怎么写,不过这方面资料太多了,如果你的简历不过关,请找些面经或者内推群给予协助,让别人指导下,然后,说下重点:在这里首先要感谢一位同学,我在前文中反复提到的,神三元,谢谢你分享你学习时的感受、谢谢你整理的系列文章。毫不夸张的说,三元发布的所有文章,我都反复学习了至少十遍吧,甚至更多,顺便在学习的过程中找出了不少文章中的笔误。要说的是,人是健忘的,所以如果你对一些内容忘记了,请继续反复学习,前面的过程是痛苦的,后面复习的时候就很简单了,我们简单回忆就能找回失去的,毕竟咱们这么多年教育对这肯定深有体会。到了这里,你的基础应该有一点了,基本常见的 手写题(看这里) 已经难不倒你了,基于此,我又花了点时间刷了 Leetcode,还是一样的套路,不会就多刷吧,那些奇淫技巧很难靠灵光一现。另外我额外又整理了几万字的笔记(放心,这里没有链接……),笔迹的内容包括但不限于:

  • 看源码,整理 Vue 与 React 框架的所有横向对比,包括渲染原理、虚拟 dom、diff、patch、fiber、批量更新,手写响应式,框架用到的模式、设计思想,性能优化,相关生态技术等等。

  • webpack 原理、热更新原理、动态加载原理、常见 plugins、loader、常见优化,怎么打包、怎么分 chunk,怎么写一个 plugins,生命周期,微内核源码等内容,以及 rollup、gulp 的使用、应用场景。(我记得有一面一个考官对我说,你对整个研发流程都很清楚,但都并不深入,比如一个 webpack 打包分包的依据怎么判定……emmmm,我倒是会,你也不问我啊!)

  • 跨端框架的研究,工程化的梳理,使用的技术栈的坑,移动端的一些实践,面试时额外准备的项目复盘,竞品调查,对方产品的资料,测试系列,还有很多如微前端、中台、serverless、可视化、Wasm 等就不举例了。

  • 除此之外,我也看了很多面经、以及技术文章。

掌握了以上内容,我们应该算是有一点知识广度了也能从容地应对前面的技术面了,当然,这不是短短几个月就能达成了,要时间的积累,那些一年就资深的牛人也是在大学甚至更早的时候就开始积累的,这一关逃不掉。到此,“技术面” 这只老虎应该能打个半死,直接干倒是不可能的,以上的知识对于校招可能足够,但社招不一定用的上,哈哈。然后就是社招的重点:业务面,怎么说呢,就是多思考多总结吧,深入思考,对每个问题一定要有深入的思考,不然就很难进入大公司了,深度上要有一个拔高才能在面试中获得好的成绩。挑出你项目中的亮点,要被别人认可的亮点,这个比较难,各位只能自求多福了,也是我本人的短板,当时也是鸡蛋里挑骨头,这是我这次找工作遇到的最大拦路虎,业务太简单,你眼中的亮点面试官觉得不是……当然我这里也可以提供一点方向给你:

  • 业务方面的思考和准备[7],你可以去这里看看,见微知著,多发散,一定会有启发
  • 这是我关注的业务大佬:58 沈剑\_架构师之路、冴羽、爱笑的架构师
  • 书籍方面:《金字塔原理》,有时间可以抽空看看,不保证有用。

面试阶段

很多面经都说回答问题时,思考一下再回答,为了组织语言,但有时候,你明明懂,在紧张的情况下反而会将关键信息跳过,答的让人不知所云。要做到:“想清楚,说明白,知道说什么,怎么说”,还是有一点难度的,关系到平常一点一滴的积累,这方面我上面已经提供了一点方向。剩下的就是面试阶段好好发挥了,没什么太好的办法,我这里建议:

  • 回答问题前思考一下,虽然不保证有用,但还是要好好履行的。
  • 多面几次,指的不同公司,只要你不嫌累。
  • 在面试某一家公司时,根据前面的面试,尝试推测后续考官会问到的业务的大致范围,或者问内推同学,提前做准备。一般会问:1 你简历上的项目,2 对方部门知名的产品,3 招聘 jd 上的 title。
  • 简单的复盘,保证别倒在同样的问题上。
  • 增加知识的广度,可以引导向别的问题,考官也是乐意听的。
  • 挑个面试的好时间,比如我本人,早上 10 点我的脑子无比灵光,说话都带着沉稳富有磁性……晚上 7 点后,就会莫名紧张,声音分贝提高几个点略微沙哑,这个真的因人而异。有时候沉稳不一定是好事,紧张反倒促使你偶有妙语和想法,当然也可能搞砸。
  • 找几个方法迅速调整好你的精气神,在前面基础学习的时候也可以用上。
  • 如果你够厉害,可以适当暗示和引导面试官问些你擅长的,千万不要被牵着鼻子走。
  • 最后,拜佛烧香,求个好运。人和人的差异,在于认知和思考力的差异。假如你一时之间思维没有一个质的变化,不如求个好运。没有一个好的运气,上面的建议可能通通都不好使,毕竟社招面试内容本身就是不稳定的,有的重技术、有的重算法、有的重业务、有的重学历、有的重眼缘……

如何坚持学习?

这一块算是补的,我依然只给建议:

  • 如果你玩游戏的话,请放弃游戏,或者戒掉一段时间,直到找到满意工作。
  • 找到你的痛点。
  • 分段学习,制定符合周期的计划。不要逼着自己,否则压力会让你崩溃的。
  • 找点鸡汤,或者去找点你没有但渴望得到的东西。
  • 业务方面,多看点书,多总结积累一些思考方式。

最后灵魂一问:

  • 你的梦想是进大厂吗?你明白的,这需要一点小小的代价。
  • 你是万中无一的奇才?如果不是,那么失败几次是正常的,大家都是普通人,也许只是不 match。

 

2021最新前端大厂面经&个人成长经验分享(1000+字)_面试