阅读 65

本来是想试试水,没想到五轮面试后真的面上了阿里前端岗

背景

本人背景渣渣,较晚入行,在一家公司稳定了三年,从一个前端白纸到如今乱涂乱画,已成雏形。2020 年年末,我离职了,因为深刻意识到自己有多 "菜",想专心花点时间提升自己。经过一点时间的调整,我重装上阵。由于节前时间有限,只投了几家,当然都是找人内推的。最终拿到比较好的offer就是阿里的,下面分享给大家我的面试经历。

阿里四轮技术+一轮 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 还问技术相关的问题。

整体感受

总体面下来没有让人紧张的感觉,中规中矩,从刚开始较高的心理预期到后面慢慢回落……由于我的水平有限,最终没有争取到多高的薪水。

个人经验分享

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

准备阶段

  • 看源码,整理 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。最后,能看到这里的小伙伴顺手点个赞吧。

文章分类
前端
文章标签