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

作者 | 沈砾捷 (磐冲)
出品 | 阿里巴巴新零售淘系技术部

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

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

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

我们想要的同学

★ 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，何况我又遇不到这些场景，我怎么可能知道。
在这里，我想严肃的说明的是：

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

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

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 的游戏。

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

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

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

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

我想怎么帮你

我相信每个人都是能快速成长的，只是每个人缺少的东西不同。有的人少了些脚踏实地，有的人少了些登高望远的机会，更多的人或许只是没有找到那条正确的路。
我希望这篇文章能够帮助到正在前端领域努力的人，也希望这一篇文章就能成为指路明灯之一。但同时我也深知，每个人都是不一样的，所以，我这里留下联系方式，需要的同学可以加微信：vianvio（加备注：前端同路人）

我可以给你做模拟面试，同时给出我认为的，适合你的发展思路和建议，当然也可以帮你内推。

另外，目前我们成立了一个模拟面试群，有定期活动，可以参考：https://github.com/vianvio/FE-Companions 欢迎有兴趣的同学来参加。

介绍一下我所在的团队

我在阿里巴巴淘宝技术部 -ihome 业务。目前，ihome 正在深耕家居家装行业，纵向深入行业内部，希望能给行业带来一些创新。目前可对外公开的产品和业务形态有：躺平 App、位于青岛和宁波的桔至生活门店。我们还有更多有趣、充满挑战和超出你想象的业务。
如果你愿意来和我们一起相信，那请发送简历过来，我们一定会一起看见！
前端简历请发送到：yefei.niuyf@alibaba-inc.com 或 lijie.slj@alibaba-inc.com
主攻 3d 方向的同学，简历请发送到：jiangcheng.wxd@alibaba-inc.com
java 简历请发送到：xiaoxian.zzy@taobao.com 或 wuxin.sn@taobao.com
客户端简历请发送到：fangying.fy@alibaba-inc.com
或许有人会觉得奇怪，联系方式写在最后，还有多少人能看到，这里我引用马老师和逍遥子老师对阿里价值观的解读，来解释一下：我们的价值观是为了帮助我们寻找同路的人。我们期待有志之士的加入！