以下我们以自己岗位在招的一份JD为例，不同业务和项目背景可能会对技能有不同要求，本份JD仅供参考。

我们想要的同学

JD

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

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

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

翻译一下JD

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

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

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

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

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

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

掌握图形学，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、传感器调试十分了解。

高级：

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

熟练掌握JavaScript。

初级：

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

中级：

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

熟悉常用工程化工具，掌握模块化思想和技术实现方案。

初级：

  • 知道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服务搭建，接入层缓存方案设计，域名管控等。
  • 客户端缓存及预加载方案。

熟练掌握React前端框架，了解技术底层。同时了解vue以及angular等其他框架者优先。

初级：

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

中级：

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

高级：

  • 能设计出框架无关的技术架构。包括但不限于：
  • 说明如何解决可能存在的冲突问题，需要结合实际案例。
  • 能说明架构分层逻辑、各层的核心模块，以及核心模块要解决的问题。能结合实际场景例举一些坑或者优雅的处理方案则更佳。

熟练掌握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的异同。

高级：

  • 有基于全家桶构建复杂应用的经验，比如最近很火的微前端和这些类库结合的时候要注意什么，会有什么坑，怎么解决

熟悉各种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方案的通用性、场景覆盖度，以及代码或工程侵入程度。
  • 埋点方案，能够说明白前端埋点方案技术底层实现，以及技术选型原理。能够设计出基于埋点的数据采集和分析方案，关键字包括：分桶策略，采样率，时序性，数据仓库，数据清洗等。

有良好的编码习惯，对前端技术有持续的热情，个性乐观开朗，逻辑性强，善于和各种背景的人合作。

初级：

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

高级：

  • 在团队内推行eslint，并给出工程化解决方案。
  • 面试过程思路清晰，面试官给出关键字，能够快速反应出相关的技术要点，但是也要避免滔滔不绝，说一堆无关紧要的东西。举例来说，当时勾股老师面试我的时候，问了我一个左图右文的布局做法，我的回答是：我自己总结过7种方案，其中比较好用的是基于BFC的，float的以及flex的三种。之后把关键css口喷了一下，然后css就面完了。

具有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分钟再聊。

我敢这么面试，因为我知道，我要的答案你查不出来，我看的是你真正理解的东西。能搜索到的，我不在乎，我也希望你去查，来为你更好的表现综合能力。

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

我希望这篇文章能够帮助到正在前端领域努力的人，也希望这一篇文章就能成为指路明灯之一。但同时我也深知，每个人都是不一样的。

也欢迎关注我们淘系技术的官方知乎号，后续我还会分享更多前端领域成长的心得和方法。

一起加油。