离一个合格的初级前端还有多远...

「转载」我在阿里招前端，我该怎么帮你？

作者：磐冲

原文地址：segmentfault.com/a/119000002…

熟练掌握 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，ajax 2.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 。
• 知道 oauth 2.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 原理；中后台架构分层；缓存处理；分布式；响应式编程等。

为了人民币，冲鸭！