我在阿里招前端,我该怎么帮你?

2,698 阅读22分钟

我是谁?为什么写这篇文章?

我是淘宝技术部的一名普通的前端技术专家,花名磐冲。每年都想给团队内招几个同学,但是努力了几年,一个都没有招进来。是我看简历太少了吗?不是,只算内部简历系统,我看过的简历至少上千。是我要求太严格吗?也许是吧,不过,我电话面试拒绝的同学,只有1位在一段时间后,入职了另一个部门。

好吧,我承认,我自己在招聘上可能是有点没找到方法。但是,看了那么多简历,经历了那么多次面试,我最大的感受却是惋惜。因为有好多同学,在电话那头我听出了努力,听出了能力,听出了激情,但是却没有听到亮点、和让我觉得,能够继续闯过下一关的能力。

我面试过的同学,在结束的时候,我都会指出问题,并给出学习建议。大部分同学不是不够努力,不是不够聪明,而是没有找对方法,没有切中要害。我总结了一下之前所有的面试经历,以及常见的问题,写下这篇文章,希望能够给前端的同学,不论是否来面试阿里的职位,有一个参考。同时,也是写下我自己总结的方法,希望能帮助到其他技术相关的同学。

我们想要的同学

JD

业务背景

淘宝内部最大创新项目之一,大团队已有百人规模,大部分项目处于保密阶段,前景远大

职位描述

1.负责组件库与业务页面开发。
2.带领团队完成技术产品实现。
3.负责大型多应用架构设计。
4.利用前端技术与服务端协同完成团队业务目标。

职位要求

0.掌握图形学,webgl或熟练使用threejs框架,熟练canvas相关渲染及动画操作的优先。
1.熟练掌握JavaScript。
2.熟悉常用工程化工具,掌握模块化思想和技术实现方案。
3.熟练掌握React前端框架,了解技术底层。同时了解vue以及angular等其他框架者优先。
4.熟练掌握react生态常用工具,redux/react-router等。
5.熟悉各种Web前端技术,包括HTML/XML/CSS等,有基于Ajax的前端应用开发经验。
6.有良好的编码习惯,对前端技术有持续的热情,个性乐观开朗,逻辑性强,善于和各种背景的人合作。
7.具有TS/移动设备上前端开发/NodeJS/服务端开发等经验者优先。

翻译一下JD

为什么起这个标题呢?因为有很多人看到职位描述,可能就在和自己做的事情一一比对,把关键字都核对上。而很多前端同学看到职位要求第一条里的图形学,可能就开始打退堂鼓了。或者看到几个关键字自己都认识,就觉得没问题,还挺简单的。

就这样望而却步真的好吗?为什么职位描述看着简单,面试却这么难呢?你真的读懂这份职位描述了吗?

现在,不妨先停一下,就上面的问题,我们来细细品一下。什么叫读懂职位描述呢?从我个人的理解,读懂职位描述,应该是读懂这个职位需要哪些基础能力,以及可能遇到哪些挑战。我们写自己简历的时候,“精通react”和“熟练使用react”,相信大家不会随意去写。同样的,JD里面的:掌握、熟练掌握、了解、熟悉,也不是随意写的,这代表了团队对新同学的能力要求。

回想写自己简历的时候,我们会对这个前缀扪心自问一下。因为会担心一旦写了精通,面试官的问题会更难,甚至觉得只有源码倒背如流的人,才能称得上精通。当然也会有同学非常自信,用react做过几个项目,就写上了精通react。

这两种都可以称为精通,也都不可以。没有客观标准,又怎么去衡量呢?而标准在哪里呢?所以在这里,我从阿里面试官角度,给出我认为的标准,尽可能的做到客观可量化。那么,基于上面这份职位标准,我来翻译一下职位要求:

首先,总览全部的要求,会发现这个职位虽然提到了3d相关的技能,但是大部分却是应用开发相关的能力,所以这个职位并不是想找专业的3d领域同学,而是需要一个工程化能力强,对3d有了解的同学。

0.掌握图形学,webgl或熟练使用threejs框架,熟练canvas相关渲染及动画操作的优先。

初级:

  • 学习过图形学相关知识,知道矩阵等数学原理在动画中的作用,知道三维场景需要的最基础的构成,能用threejs搭3d场景,知道webgl和threejs的关系。
  • 知道canvas是干嘛的,聊到旋转能说出canvas的api。
  • 知道css动画,css动画属性知道关键字和用法(换句话说,电话面试会当场出题要求口喷css动画,至少能说对大概,而不是回答百度一下就会用)。
  • 知道js动画,能说出1~2个社区js动画库,知道js动画和css动画优缺点以及适用场景。
  • 知道raf和其他达到60fps的方法。

中级:

  • 如果没有threejs,你也能基于webgl自己封装一个简单的threejs出来。
  • 聊到原理能说出四元数,聊到鼠标操作能提到节流,聊到性能能提到restore,聊到帧说出raf和timeout的区别,以及各自在优化时候的作用。
  • 知道怎样在移动端处理加载问题,渲染性能问题。
  • 知道如何结合native能力优化性能。
  • 知道如何排查性能问题。对chrome动画、3d、传感器调试十分了解。

高级:

  • 搭建过整套资源加载优化方案,能说明白整体方案的各个细节,包括前端、客户端、服务端分别需要实现哪些功能点、依赖哪些基础能力,以及如何配合。
  • 设计并实现过前端动画引擎,能说明白一个复杂互动项目的技术架构,知道需要哪些核心模块,以及这些模块间如何配合。
  • 有自己实现的动画相关技术方案产出,这套技术方案必须是解决明确的业务或技术难点问题的。为了业务快速落地而封装一个库,不算这里的技术方案。如果有类似社区方案,必须能从原理上说明白和竞品的差异,各自优劣,以及技术选型的原因。
1.熟练掌握JavaScript。

初级:

  • JavaScript各种概念都得了解,《JavaScript语言精粹》这本书的目录都得有概念,并且这些核心点都能脱口而出是什么。这里列举一些做参考:
  • 知道组合寄生继承,知道class继承。
  • 知道怎么创建类function + class。
  • 知道闭包在实际场景中怎么用,常见的坑。
  • 知道模块是什么,怎么用。
  • 知道event loop是什么,能举例说明event loop怎么影响平时的编码。
  • 掌握基础数据结构,比如堆、栈、树,并了解这些数据结构计算机基础中的作用。
  • 知道ES6数组相关方法,比如forEach,map,reduce。

中级:

  • 知道class继承与组合寄生继承的差别,并能举例说明。
  • 知道event loop原理,知道宏微任务,并且能从个人理解层面说出为什么要区分。知道node和浏览器在实现loop时候的差别。
  • 能将继承、作用域、闭包、模块这些概念融汇贯通,并且结合实际例子说明这几个概念怎样结合在一起。
  • 能脱口而出2种以上设计模式的核心思想,并结合js语言特性举例或口喷基础实现。
  • 掌握一些基础算法核心思想或简单算法问题,比如排序,大数相加。
2.熟悉常用工程化工具,掌握模块化思想和技术实现方案。

初级:

  • 知道webpack,rollup以及他们适用的场景。
  • 知道webpack v4和v3的区别。
  • 脱口而出webpack基础配置。
  • 知道webpack打包结果的代码结构和执行流程,知道index.js,runtime.js是干嘛的。
  • 知道amd,cmd,commonjs,es module分别是什么。
  • 知道所有模块化标准定义一个模块怎么写。给出2个文件,能口喷一段代码完成模块打包和执行的核心逻辑。

中级:

  • 知道webpack打包链路,知道plugin生命周期,知道怎么写一个plugin和loader。
  • 知道常见loader做了什么事情,能几句话说明白,比如babel-loader,vue-loader。
  • 能结合性能优化聊webpack配置怎么做,能清楚说明白核心要点有哪些,并说明解决什么问题,需要哪些外部依赖,比如cdn,接入层等。
  • 了解异步模块加载的实现原理,能口喷代码实现核心逻辑。

高级:

  • 能设计出或具体说明白团队研发基础设施。具体包括但不限于:
  • 项目脚手架搭建,及如何以工具形态共享。
  • 团队eslint规范如何设计,及如何统一更新。
  • 工具化打包发布流程,包括本地调试、云构建、线上发布体系、一键部署能力。同时,方案不仅限于前端工程部分,包含相关服务端基础设施,比如cdn服务搭建,接入层缓存方案设计,域名管控等。
  • 客户端缓存及预加载方案。
3.熟练掌握React前端框架,了解技术底层。同时了解vue以及angular等其他框架者优先。

初级:

  • 知道react常见优化方案,脱口而出常用生命周期,知道他们是干什么的。
  • 知道react大致实现思路,能对比react和js控制原生dom的差异,能口喷一个简化版的react。
  • 知道diff算法大致实现思路。
  • 对state和props有自己的使用心得,结合受控组件、hoc等特性描述,需要说明各种方案的适用场景。
  • 以上几点react替换为vue或angular同样适用。

中级:

  • 能说明白为什么要实现fiber,以及可能带来的坑。
  • 能说明白为什么要实现hook。
  • 能说明白为什么要用immutable,以及用或者不用的考虑。
  • 知道react不常用的特性,比如context,portal。
  • 能用自己的理解说明白react like框架的本质,能说明白如何让这些框架共存。

高级:

  • 能设计出框架无关的技术架构。包括但不限于:
  • 说明如何解决可能存在的冲突问题,需要结合实际案例。
  • 能说明架构分层逻辑、各层的核心模块,以及核心模块要解决的问题。能结合实际场景例举一些坑或者优雅的处理方案则更佳。
4.熟练掌握react生态常用工具,redux/react-router等。

初级:

  • 知道react-router,redux,redux-thunk,react-redux,immutable,antd或同级别社区组件库。
  • 知道vue和angular对应全家桶分别有哪些。
  • 知道浏览器react相关插件有什么,怎么用。
  • 知道react-router v3/v4的差异。
  • 知道antd组件化设计思路。
  • 知道thunk干嘛用的,怎么实现的。

中级:

  • 看过全家桶源码,不要求每行都看,但是知道核心实现原理和底层依赖。能口喷几行关键代码把对应类库实现即达标。
  • 能从数据驱动角度透彻的说明白redux,能够口喷原生js和redux结合要怎么做。
  • 能结合redux,vuex,mobx等数据流谈谈自己对vue和react的异同。

高级:

  • 有基于全家桶构建复杂应用的经验,比如最近很火的微前端和这些类库结合的时候要注意什么,会有什么坑,怎么解决
5.熟悉各种Web前端技术,包括HTML/XML/CSS等,有基于Ajax的前端应用开发经验。

初级:

  • HTML方面包括但不限于:语义化标签,history api,storage,ajax2.0等。
  • CSS方面包括但不限于:文档流,重绘重排,flex,BFC,IFC,before/after,动画,keyframe,画三角,优先级矩阵等。
  • 知道axios或同级别网络请求库,知道axios的核心功能。
  • 能口喷xhr用法,知道网络请求相关技术和技术底层,包括但不限于:content-type,不同type的作用;restful设计理念;cors处理方案,以及浏览器和服务端执行流程;口喷文件上传实现;
  • 知道如何完成登陆模块,包括但不限于:登陆表单如何实现;cookie登录态维护方案;token base登录态方案;session概念;

中级:

  • HTML方面能够结合各个浏览器api描述常用类库的实现。
  • css方面能够结合各个概念,说明白网上那些hack方案或优化方案的原理。
  • 能说明白接口请求的前后端整体架构和流程,包括:业务代码,浏览器原理,http协议,服务端接入层,rpc服务调用,负载均衡。
  • 知道websocket用法,包括但不限于:鉴权,房间分配,心跳机制,重连方案等。
  • 知道pc端与移动端登录态维护方案,知道token base登录态实现细节,知道服务端session控制实现,关键字:refresh token。
  • 知道oauth2.0轻量与完整实现原理。
  • 知道移动端api请求与socket如何通过native发送,知道如何与native进行数据交互,知道ios与安卓jsbridge实现原理。

高级:

  • 知道移动端webview和基础能力,包括但不限于:iOS端uiwebview与wkwebview差异;webview资源加载优化方案;webview池管理方案;native路由等。
  • 登陆抽象层,能够给出完整的前后端对用户体系的整体技术架构设计,满足多业务形态用户体系统一。考虑跨域名、多组织架构、跨端、用户态开放等场景。
  • mock方案,能够设计出满足各种场景需要的mock数据方案,同时能说出对前后端分离的理解。考虑mock方案的通用性、场景覆盖度,以及代码或工程侵入程度。
  • 埋点方案,能够说明白前端埋点方案技术底层实现,以及技术选型原理。能够设计出基于埋点的数据采集和分析方案,关键字包括:分桶策略,采样率,时序性,数据仓库,数据清洗等。
6.有良好的编码习惯,对前端技术有持续的热情,个性乐观开朗,逻辑性强,善于和各种背景的人合作。

初级:

  • 知道eslint,以及如何与工程配合使用。
  • 了解近3年前端较重要的更新事件。
  • 面试过程中遇到答不出来的问题,能从逻辑分析上给出大致的思考路径。
  • 知道几个热门的国内外前端技术网站,同时能例举几个面试过程中的核心点是从哪里看到的。

高级:

  • 在团队内推行eslint,并给出工程化解决方案。
  • 面试过程思路清晰,面试官给出关键字,能够快速反应出相关的技术要点,但是也要避免滔滔不绝,说一堆无关紧要的东西。举例来说,当时勾股老师面试我的时候,问了我一个左图右文的布局做法,我的回答是:我自己总结过7种方案,其中比较好用的是基于BFC的,float的以及flex的三种。之后把关键css口喷了一下,然后css就面完了。
7.具有TS/移动设备上前端开发/NodeJS/服务端开发等经验者优先。
  • 根据了解的深度分初/中/高级。
  • 知道TS是什么,为什么要用TS,有TS工程化实践经验。
  • 知道移动端前端常见问题,包括但不限于:rem + 1px方案;预加载;jsbridge原理等。
  • 能说出大概的服务端技术,包括但不限于:docker;k8s;rpc原理;中后台架构分层;缓存处理;分布式;响应式编程等。

JD的要求很难吗?

首先,感谢你能看到这里,如果你是仔细看的,那么我更加感动了。而且你已经用实际行动,证明了你的学习能力和耐心。上面那么大篇幅的JD翻译,有一个问题,大家应该都有答案了:为什么职位描述看着简单,面试却这么难呢?然而,有些同学可能会嘲讽起来:写了那么多,我认识的有些阿里P6,P7也不是都会啊,大厂都是螺丝钉,也就面试时候问问,实际工作不还是if else,何况我又遇不到这些场景,我怎么可能知道。

在这里,我想严肃的说明的是:

  1. 我所认识的淘宝前端,以及我所在团队的P6同学,上面初级都能做到,中级至少覆盖60%,高级覆盖20%;P6+同学,中级覆盖80%以上,高级覆盖50%以上;P7同学高级覆盖80%以上。

  2. 我们团队的前端,每一个人都负责多个复杂业务项目(客观数据上:至少对接20+服务端接口,5个以上router配置,涉及多个用户角色的综合业务系统),以及一些通用能力,比如组件库等。不存在一个人只接一条业务线,只负责维护某几个组件这种螺丝钉式的工作。我不知道大厂都是螺丝钉的言论为什么会被复用到互联网企业,我个人感受是,如果我在阿里的工作是螺丝钉,那么我以前几份工作可能勉强算是螺纹。另外,如果你想要晋升,那么维护好这几个业务系统只是你的本职工作,晋升时请提供一些更高层面的思考和技术产出。

  3. if else也分鲜花和牛粪。有的人写的是[].reduce,而有的人写的是var temp = ''; for() { temp += 'xxx' }。另外,如果不知道原理,那么类似webpack这种明星级的技术产品,将永远与你无缘。冷静下来想想,webpack难道也只是if else吗?是,又不全是。

聪明的你应该看出来了,上面JD翻译里的初级、中级和高级,对应的就是我认为的,阿里p6/p6+/p7的能力标准,同时也是一张知识图谱。初级的要求更偏实际应用和基础原理,中级的要求是基于原理的拓展和复杂技术架构的应用,高级的要求是对跨栈、跨端,多领域结合产出综合方案的能力。而且,我们对技术的要求,都是能够与实际业务场景结合,或者能对提升工作效率有帮助的。空谈和尬想,或者只是百度来的文章,没有经过内化,那么面试过程中将被瞬间拆穿。

有时我会在boss直聘上直接打字面试,有时我也会听到面试过程中,电话那头传来键盘敲击的声音,甚至有时候我会主动让面试的同学去百度一下,或者挂电话思考一下,过15分钟再聊。我敢这么面试,因为我知道,我要的答案你查不出来,我看的是你真正理解的东西。能搜索到的,我不在乎,我也希望你去查,来为你更好的表现综合能力。

破局的方法

好了,如果看到这里,并没有把你劝退的话,那么让我们来点希望的曙光。这里用一句阿里土话来给大家一些安慰:不难,要你干嘛?

开篇我提到面试过那么多同学之后,我最大的感受是惋惜,因为有很多同学在我看来就差一点点,他有足够的个人能力,可能只是没有找到感觉。这里我例举两个比较典型的问题。

什么是亮点?

我相信这是很多同学心中的疑惑,而且事实上,我看到很多简历下面的面试记录都会写:缺乏亮点,暂不考虑。如果仔细看了上文,到这里还有这个疑惑,那么我觉得你需要再静下心来感受一下。

这里我不对亮点做明确的表述,我举一个例子来让大家更有体感一些:

A: 负责公司前端工作,使用webpack打包代码并发布线上。使用webpack配置对整体性能做优化,用happypack加快了打包速度。

B: 建设内部云构建体系,产出通用命令行指令工具;将发布、环境切换、快速回滚能力平台化,保证了线上环境稳定性;同时将研发流程量化管控,每周产出研发效能报告。

如果你是面试官,在简历的大海里看一个项目描述,什么最吸引你的眼球呢?是webpack,happypack的关键字吗?还是一句话就让你想到这件事的复杂性,和这个系统带来的巨大价值?

没有场景怎么办?

这也是很多同学经常遇到的问题。上面例举了那么多技术点,而我在的环境,前端就我一个,甚至服务端我都要写一点,哪有精力去搞这种大规模团队用到的东西?

首先,时间靠自己合理规划。我和老婆两个人自己带孩子,有两个娃,每天平均9点下班,我每天回家收拾玩具,孩子睡得晚可能需要再陪玩一下,周末我带孩子为主,但是我去年仍然白金了2个ps4的游戏。

在时间问题排除之后,我建议分三个阶段:

  1. 毕业3年以内的阶段:不用着急,你的选择很多,你可以核对上面初级的点,看自己是否都做到了,没做到就去好好学习吧,初级的技术要点对团队规模没有依赖,一个人也能做到极致。如果你所处的环境已经有2个人,可以同时关注中级和高级的点,不要觉得人少就不去尝试,放手去做,过程中会有实打实的收获。

  2. 毕业5年以内的阶段:不论你处的环境团队规模如何,请开始着眼于中级和高级相关能力,人少就不需要研发提效了吗?我在segmentFault上发的第一篇文章,是如何用travis和github做一键部署,那时候我还没有去淘宝,我所在的团队也没有用到这个能力,这篇文章是我自己的个人项目用到的。而整个过程同样涉及到了研发效能的方方面面。

  3. 毕业8年以内的阶段:请开始着眼于高级相关的技术方案产出。我以组件动态化为例,我早年维护手机淘宝的整个交易链路H5页面,所有页面的ui部分都是细粒度组件化抽离,通过配置下发页面结构的。即使一个人维护一个页面,也要竭尽所能去思考好的技术方案。这种高度动态的设计,带来的好处是,每年双十一,80%的需求交给pd自己处理就行了,剩下流转到我手上需要开发的需求,都是新增交互,或者之前抽象不足的组件。所以当时我在的团队,3个人在维护了包括手淘首页、商品详情和正逆向交易链路所有H5页面,同时还有额外精力去支持大促会场页。更好的技术思考和设计,一定能给你带来更多的可能性,而系统的优雅程度,一定不是靠业务代码的堆砌,而是作为技术核心的你,如何去思考。

我想怎么帮你

我相信每个人都是能快速成长的,只是每个人缺少的东西不同。有的人少了些脚踏实地,有的人少了些登高望远的机会,更多的人或许只是没有找到那条正确的路。

我希望这篇文章能够帮助到正在前端领域努力的人,也希望这一篇文章就能成为指路明灯之一。但同时我也深知,每个人都是不一样的,所以,我这里留下联系方式,需要的同学可以加微信:vianvio,加备注:前端同路人。我可以给你做模拟面试,同时给出我认为的,适合你的发展思路和建议,当然也可以帮你内推。

如果你觉得我们团队对你很有吸引力,或者你觉得上面JD里面的要求都很简单,欢迎将简历投递到:lijie.slj@alibaba-inc.com

或许有人会觉得奇怪,联系方式写在最后,还有多少人能看到,这里我引用马爸爸和逍遥子大佬对阿里价值观的解读,来解释一下:我们的价值观是为了帮助我们寻找同路的人。

感谢你陪我一起走到这篇文章的最后,如果你觉得这篇文章已经对你有很大帮助了,那就请我喝杯咖啡吧~