前端大师炼成记：中高级前端进阶指南

五年前端三年加班 5–3=2，当你从事前端工作两年后，你已经掌握了前端的基础技能，也参与了大量的项目，代码量飞速增长，这个时候，你应该开始追求质量，而非数量。

你可能经常听见工程化、组件化、自动化、工具化、模块化等等词语，也可能被问到性能优化、网络通信、阅读源码等等问题。

如何从一个初级前端，往中高级前端前进？

本场内容简介：

1. 如何判断你自己的技术等级；
2. 详解前端的多元化；
3. 选择适合自己的前行计划；
4. 如何管理自己的技术成长计划。

你的付出与你的投入是成正比的，成长的路上，你要主动去不断的提升自己，天赋诚可贵，勤奋价更高。

内容将为你讲述作为一个中高级前端你应该掌握些什么内容，你需要如何来掌握这些技能，以及你如何管理好自己的技术成长计划。

前言

每一个程序员在工作的前几年都会有间隔性的迷茫时期，对自己接下来的职业道路没有一个明确的规划。我们应该要在前进的道路中立下一座照明灯，然后跟随它去不断的去修正自己的道路。

对于任何一个程序员而言，从来都不会停止学习，也不能停止学习。不学习新的内容，你就会被淘汰。我在之前的很多文章中提到三种学习方式。

主动学习

明确知道自己的目标，会给自己安排计划，让自己具有充足的技术储备。

被动接受学习

知道自己对于什么有了需求，然后需要去进行系统的学习，然后 Get 到新技能。

被动不接受学习

知道自己对于某个东西有了需求，还不去学习，或者说零零散散的看一点，结果等到使用的时候开始疯狂找各个点补内容。

如果你拥有第一种学习态度，那无疑是最好的，你有着自己明确的目标，也拥有自控能力，不管你的天赋如何，只要有这样的态度，你的道路就是通向成功的道路。

如果你拥有第二种学习态度，也是还可以的，虽然你或许没有一个明确的目标，没有一个详细的计划，但是随着你工作经历的累积，项目需求难度的增加，你也会成为一个不错的程序员，区别可能在于，你会丧失一些晋升空间，丧失一些竞争优势，成长的道路比别人慢一点。

然而对于第三种学习态度，如果你有想成为一个优秀的工程师，那也是有可能的，毕竟哪怕我不买彩票，也可能中 500W，万一我运气好刚好在路边捡到别人扔掉的中奖彩票呢？但是如果你不具备这种逆天的运势，最好还是改变自己的学习态度。

前端 Level 划分

作为一个前端工程师，如何来判断你自己处于行业的一个什么水准呢？

我在前年的一篇文章中给了一套娱乐性质按照项目能力来划分的方案，今天给大家带来一套我在招聘过程中和其他招聘负责人探讨过的方案。

初级

初级前端招聘任职要求：

• 能独立使用 HTML、CSS、JavaScript 实现前端功能，熟悉各种浏览器平台特性，能很好的解决兼容性问题；
• 熟悉 Web 前端技术（XHTMLXML/CSS/JavaScript/Ajax），熟悉至少一种 JavaScript 库（如：JQuery/AngularJS/backbone/Vue.js/React-native……），熟悉 CSS 框架（如：Bootstrap/Ant/AmazeUi……），了解部分自动构建工具（如：bower/grunt/gulp）。

初级前端的岗位职责：

• 根据产品需求和设计，完成 Web 端及移动端 HTML/HTML5 的前端页面开发，实现交互效果；
• 与后端工程师协作，完成数据交互、动态信息展现。

简单来说，一个初级前端，需要掌握基础的前端技术，然后掌握一些 JavaScript 库，一些 CSS 框架。而初级前端的工作内容就是，还原产品设计图，与后台进行数据交互。只要能够达成，那么你就是一个初级前端了。

PS：在初级前端之前，还有前端实习生，对于不满足上述条件的人来说，都可以归纳到实习生中。

中级

中级前端招聘任职要求：

• 1–3 年 Web 前端工作经验。
• 精通 JavaScript，使用语义化标签，精通 Vue.js/AngularJS/React 中的一种或多种，使用过（Echats/地图 API……）之类的第三方插件，具有自己的样式兼容性解决方案，具备独立开发能力。

加分项： 有小程序开发经验； 有前端 APP 开发经验； 了解一门后端语言。

中级前端的岗位职责：

• 参与需求调研，分析，开发计划制定；
• 开发与维护系统；
• 为初级开发人员提供技术指导。

一个中级前端，首先会要求你有 1–3 年的工作经验，因为这样才能确保你具有几个实际的项目经验，然后会要求你精通前端的基础技术，同事你需要具有独立开发的能力，并且精通至少一种当前市场的主流 JavaScript 库，还要具备有使用过第三方的插件经验。当然你有小程序/APP/后端开发的经验，那就是更好的。

高级

高级前端招聘任职要求：

• 五年以上前端开发经验；
• 本科及以上学历，计算机相关专业；
• 深入研究 JavaScript，精通 MV*类框架（如：Vue.js/AngularJS/React），有源码阅读习惯，掌握各种版本控制器、包管理工具，会使用各类浏览器插件辅助开发；
• 掌握一门后端开发语言（Python/Node.js/Java），并且有实际开发经验；
• 具有工程化思想，开发模式自动化、工具化、模块化、组件化，具有性能调优经验，掌握设计模式，对网络通信有一定研究。

高级前端的岗位职责：

• 负责产品架构，指导开发流程，并带领团队人员实现；
• 负责核心公共模块开发；
• 为团队提供技术成长方案。

在一般的中小型团队中，高级前端基本就是一个项目的负责人了，他需要负责整个前端团队，所以对于工作年限，大多都会有五年以上的需求，而学历限制，则是为了确保你具有良好的学习能力及专业水准。对于技术方面，基本上前端基本的及附属的内容你都需要会，对于主流类型的框架你都需要精通。这个时候，你要做的不仅仅是开发出一个项目，而是要考虑如何开发出一个友好的项目。它要拥有良好的体验，便于维护，性能优化也要需要，还需要减少不必要的部分（包括时间，冗余代码等等）。

多元化的前端

题话外

我正式从事前端开发工作是从 2015 年开始，我的第一个网站是在零几年写的，那是我中学时期，还没有前端这个概念，就知道可以做网站，还并非通过代码写的，而是通过一款叫做 Frontpage，通过可视化的插入各种内容来编辑一个网站，做的都是一个个静态网站。从那个时期开始，我就决定了自己这一生所从事的就是计算机相关的技术类工作。

从初中到高中毕业，我学习了很多计算机相关的内容，网站制作、FLASH 动漫制作、PS 处理图片、ACCESS 数据库、Office 三件套、主板维修、简单的 C 命令、还有打字。我以前用 FLASH+Frontpage 制作了很多网站效果，还在省级大赛中拿过头奖。

进入大学之后，开始学习的内容也全是计算机相关的内容，不过开始进阶了。Java、C++、VB、HTML、CSS、JavaScript、3D 建模、平面设计、SQL Server、MySQL、交换机路由器……

十多年过去了，很多我曾经学过的技术已经被淘汰了，很多我曾经引以为傲的已经变成了过去，他们已经被时代所淘汰。

十多年间，可能变化比较小的，就是百度的首页吧。

从十多年前的做电脑网站到如今的前端开发，发生了太多的变化，前端不再仅仅是做电脑网站，甚至电脑网站的开发已经不再占据前端开发的大半内容。如果更不上技术更新的步伐，那你就会被边缘化，然后被淘汰。

所以，在前端进阶之路上最重要的还是学习，不能理解学习的重要性，你始终无法快速成长。

下面我们来探讨下多元化的前端都有些什么

Web 开发

Web 开发也就是我们最传统的网站开发，主要就是在浏览器上展示我们的网站。

H5 开发

H5 是国内的说法，并不在国际上通用。H5 就是 HTML5，因为 H5 新增的特性，出现了很多专做 H5 页面的公司，利用 H5 能够实现大量 H4 无法实现可视化效果，H5 在移动端得到大量使用。

内嵌开发（小程序）

这里的内嵌开发指的是依靠于某些大型平台，使用前端技术，遵从对方的规范进行规范，然后内容也嵌入在对方的平台内。比如微信小程序开发、支付宝小程序开发、微信公众号开发。他们仅限于平台内使用，无法独立。

APP开发

APP，Application 不念A P P发音为 [æp]。前端开发 APP一般两套方案，一套是传统前端+打包技术，另一套则是使用原生应用的框架进行开发如：React-Native、Weex。前几年前端开发的 APP显得有点鸡肋，并没有得到大规模的应用，但是随着技术的发展，如今的前端开发的 APP 和原生的差别对于用户而言差别已经不大了。如果想使用原生应用的框架进行开发并且精通此类开发，那你可能还需要掌握一些 Android 和 iOS 的技术。

服务端开发

Node.js 的出现为前端再次拓展了一条宽敞的道路，Node.js 作为一个前端基本都有接触过，我们很多时候用的开发也是需要搭建 Node.js 环境。而Node.js 作为一门后端开发语言已经非常成熟并且得到了广泛的应用。

游戏开发

Three.js、Phaser、Createjs、Egret、Cocos2d-js 等框架的出现，让前端在游戏开发中开辟了新的天地，从而带来的市场非常的广阔。之前的“大家好我是渣渣辉”，“是兄弟就来砍我”，“油腻的师姐在哪里”等页游铺天盖地。

桌面端开发

使用前端进行桌面开发桌面程序，Electron 这个框架被大量的运用于前端开发桌面程序，和前面的几种相比较，可能使用者没有那么广泛。

面对多元化的前端，我们不可能掌握所有的开发方向，那么我们应该如何来选择我们自己的前行方向呢？下面我们一起来探讨探讨。

在前端的初级阶段，我们需要掌握好传统的 Web 开发，这是我们的核心。当我们掌握了 Web 开发之后，我们可以去了解 H5 相关的开发，从 H5 还可以进阶到游戏开发。

基础→H5→游戏

另一种当你对于 JavaScript 和 MV* 类框架掌握好之后，可以去尝试内嵌开发，比如小程序。

基础→小程序开发

如果你对于小程序开发没有太大的兴趣，那你可以尝试去接触 APP 开发，对于 APP 开发而言，难度较于小程序开发要难得多，你需要去学习一套新的体系内容。

基础→APP 开发

如果你对桌面应用开发感兴趣，你也可以选择去尝试开发桌面应用。

基础→桌面开发

如果你觉得掌握了基础开发之后，对于后端感到好奇，那么 Node.js 无疑就是你最好的学习内容了，前端技术实现服务端开发。

基础→服务端开发

对于选择游戏开发和桌面端开发的小伙伴而言，我所涉及的并不多，不能给予一份完整的成长线路，比较抱歉了。

以上几点是基于一个初级前端的选择方案，对于上述内容你要做到的是掌握以上某些方案。

而对于一个中级前端而言，你可能需要掌握的的就是复合的线路了。一个合格的中级前端，你肯定是精通其中一条线路，同时还掌握一条或几条其他线路的技能。

如果想成为一个高级前端，那么无疑首先你要精通基础开发，同时对于 H5、小程序、APP 这些你都要很熟悉，并且你还要掌握服务端开发，对于 Node.js 要相对熟悉，最好还要掌握一门其他后端语言，比如 Python。

在基础阶段，我们的前端基础技能就不说了，这是必备的，你同时还需要掌握至少一个 MV* 库，如 Vue.js/AngularJS/React 等三个主流的库其中一种，因为市场的需求基本多是这三者，虽然面对市场的需求来学习并非良方，但是你满足不了市场就失去了生存能力。Vue.js 是我用得最多的库，对于这三者而言，它是最容易上手的，学习成本较低，市场接受度也最高。AngularJS 我可能有两年没有使用过了，版本升级迭代非常快。目前市场占有率较低。React 区别于二者，有自己更为独立的一套体系，市场需求介于 Vue.js 与 AngularJS 之间，React-Native 用于 APP 开发，目前占据前端 APP 开发最大份额，近半年我也使用 RN 开发了两款 APP 整体感觉比之前使用的传统前端+第三方平台打包技术体系要更加贴近于纯原生开发。

中级阶段，你需要掌握好 CSS3 与 H5 的内容，如果你对视觉效果更加感兴趣，可以偏向于 H5 和游戏方面发展。我们日常对于一个中级前端的需求，可能需要他掌握的内容比较多，不一定需要每一样你都精通，但是你需要掌握多种技能，能够适应多种开发。

而一个高级前端，对于上述内容除了游戏和桌面开发，基本你都需要掌握完整。并且这个时候你的编程不应该局限于基础技术、框架这些之上，你需要知道隐藏在这些之下的有些什么，对于底层实现原理要去理解，要去掌握他们的机制。简单来说，就是吃透这些东西，能够基于它现有的内容去改变，去优化。

开发技术

对于不同阶段的前端开发人员而言，开发的过程中的侧重点也不相同。而作为一个中高级前端，在技术方面都应该注意些什么？

如果你是一个 leader 角色，那么你如何来开展一个项目呢？

开展一个项目，需要让每个开发人员都参与进来，从前期开始，就要让大家一起来讨论。知道我们要做一个什么东西，而每个人在其中分别担任什么角色。

1.合理的安排项目进度，谁在什么时候该做什么。

2.前期多准备一分钟，开发阶段少耽误一小时。前期应该把准备工作做充足，而非便开发边看。

3.统一开发标准，使用合适的开发工具以提高开发效率，对于项目而言，要自动化，工具化。

4.将项目功能模块化，组件化，提高代码的可用性，减少代码的耦合性。

5.优化项目。

下面我们来看看，我们的开发技术中，有哪些值得探讨的部分。

HTML\CSS

如果能用 HTML\CSS 解决的问题，不要通过 JavaScript 来完成。

因为前端的机制决定，如果我使用 JavaScript 来做一些 CSS 样式，那可能在页面渲染的时候会使得它不一定能达到你的预期效果。它必须 在 JavaScript 脚本加载完成后才会生效。另一方面讲，这样做变得更加复杂了。

合理利用 CSS3

CSS3 能够带来很多视觉上的新体验，可以在页面中合理的使用它来增加网站视觉方面的体验。

区别图标/雪碧图/字体图标

图标值得就是网站中会使用到的一些小的标志，一般是单张图标为一个图标。

雪碧图就是将很多小图合并成一张大图，然后通过 background-position来使用。它能够减少浏览器的请求次数。

字体图标，就是通过 CSS 来完成图标的展示，将各种图标变为字体图标，然后使用 CSS 进行控制。

对于三者而言，现如今很多都会使用字体图标来配合我们的开发，你需要根据自己的需求来判断，什么适合你。

尽量使用伪类元素

伪类元素能够简化页面结构，让你的代码更加美观，增加代码的可读性。

合理实现页面布局

同样的一个页面布局，不同的人来写会有不同的实现方式。position/float/display 这些，在你的使用过程中，你需要知道他们的区别在哪，怎么使用才是合理的。

CSS 属性性能的理解

对于不同的 CSS 属性而言，它所消耗的性能也是不一样的，一般情况下 CSS3 对于性能的消耗会远远大于 CSS2 的性能消耗。所以当你选择 CSS 属性的时候需要了解使用哪个更加合理。

善用 CSS 选择器

CSS 选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间，所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器。

JavaScript

结构分离

不要将 JavaScript 代码混合在 HTML 中

模块化，组件化

提高代码的可用性，减少代码的耦合性。

不要滥用闭包

滥用闭包会使得查找变量的时间增长，影响效率。

避免使用==

== 与 === 的区别在于类型上，JavaScript 是弱类型的编程语言，我们在定义的时候最好连同类型一起定义。在严格模式下，== 是会报错的。

逻辑判断

if（true）{
    // dos omething
} elseif{
    // dos omething
}

对于这样的情况，可以使用三目运算符来替代

使用 ES6 简化代码

ES6 目前应该是必须掌握的，合理使用 ES6 能够简化你的代码。使用 ES6 书写，如果不兼容再通过工具转化为 ES5。

精度处理

关于精度问题大家都应该遇见过，也就是 0.1+0.2=0.30000000000000004 这样的问题。因为编程语言的原因，导致我们计算出来的值存在问题，而实际有效的应该是小数点后 15 位，所以我们应该针对小数点后15位做对应的处理。

进阶高级的技术

如果你知道写 JavaScript 代码，但是不知道它是如何运行的，你知道与后台交互发送请求，但是不知道是如何实现通信的。只知其然，不知其所以然。那么你始终无法成为一个独当一面的高级前端。

上面讨论的都是一些初级之后应该学会的内容，但是而接下来，我们会来探讨更加深入一些的内容。

掌握计算机通信知识：

作为一个前端，在我们的工作过程中实际上大量用到了计算机的通信相关的内容。所以你需要去了解 TCP/IP、HTTP、HTTPS。

去了解我们一般的 HTTP 请求是如何实现的，websocket 又是如何实现的。

面向对象

前端不是面向对象编程的语言，但是如果你想做的更好，走得更远，那么你必须要有面向对象思维。

会其他编程语言

作为一个高级前端，你肯定会其他后台语言，你需要知道后台是如何工作的，这样才能更好的进行自己的工作。所谓知己知彼，百战不殆。不会后台的前端不是好前端。

掌握数据库

数据是页面中最多的有效信息，而数据库是则是它们的来源，从数据库到后端，后端处理后再到前端。前端获取到的数据传递给后端，后端处理后存入数据库。对于我们而言，我们要知道数据在这其中都是如何来转变的，所以数据库也是我们需要掌握的。

算法

掌握算法，就是为了更好的解决问题。

参与维护开源项目

不管是维护一些比较大的开源项目，还是自己的小项目，它都是考验一个人多方面技能的。

开发人员在开发过程中，往往会遇见各种各样的问题，而我刚好有这么一份列表，当你能回答完的时候，我想你就算得上高级前端了。

请求

1. 常见 Http 请求头
2. 如何解决跨域的问题
3. 如何使用 websocket 进行交互
4. 文件上传如何做断点续传
5. 表单可以跨域吗
6. 讲解 promise、async、await
7. 讲解 cookie、session、localStorage
8. 简述 TCP/IP 协议
9. 通信常见状态码分别表示什么

页面

1. 讲解 flex、rem、em、px 的区别
2. 介绍 flex 布局
3. 讲解几种常见的布局
4. 移动端适配 1px 的问题
5. 讲解浮动和定位的区别与问题
6. 浏览器加载渲染页面是如何完成的
7. CSS 的权重问题
8. 当 JS 改变了页面样式后浏览器做了什么
9. CSS 常见造成布局错乱的原因

JavaScript

1. 怎么实现 this 对象的深拷贝
2. ES6 与 ES5 有什么区别
3. call、apply、bind 的区别
4. some、every、find、filter、map、forEach 有什么区别
5. 讲解闭包、闭包使用场景
6. JavaScript 的继承方法

webpack 工具

1. webpack 打包的整个过程
2. webpack 里面的插件是怎么实现的
3. 使用 import 时，webpack 对 node_modules 里的依赖会做什么
4. 常用的 plugins
5. webpack 常见的问题有哪些

React 框架

1. 讲解 Redux 和 React-Router，Redux 在多组件之间如何工作
2. React 中 Dom 结构发生变化后内部经历了哪些变化
3. WebView 和原生是如何通信
4. 对于 React 生命周期的看法
5. React 中的 key 的作用
6. React/Redux 中哪些功能用到了哪些设计模式
7. 讲解 React 高阶组件
8. 虚拟 DOM 本身是什么

**Vue.js 框架

1. 讲解 Vuex 与 Vue-Router
2. 的作用是什么?
3. 在路由跳转的时候如何实现网站标题的改变
4. 讲解 Vue.js 的生命周期函数，分别在什么情况使用
5. 讲解 Vue.js 指令有哪些，分别有什么作用
6. 如何来封装一个组件，组件如何实现通讯（父子组件、兄弟组件）
7. 讲解 watcher 和它的使用场景

框架对比

1. React 和 Vue 有什么相似的地方
2. React 和 Vue 的生态圈分别有哪些组成
3. React 和 Vue 性能方面谁更有优势
4. React 和 Vue 如何判断哪个更适合当前项目

移动开发

1. React-Native 中，有哪些 CSS 属性不支持
2. 微信小程序开发，哪些 CSS 属性对苹果机型无效
3. 微信小程序中，页面层级最多允许多少级
4. 移动端常用的适配方案有哪些
5. React-Native 与 Weex 对比有哪些相似与不同

为大家推荐一些前端不错的书籍

• 《JavaScript高级程序设计》红宝书，一本非常好的基础书籍
• 《JavaScript权威指南》犀牛书，开发手册
• 《深入浅出Node.js》Node.js教程
• 《ES6标准入门》阮一峰出的关于ES6的指南
• 《高效前端》Web高效编程与优化实践
• 《算法之美》将计算机的智慧转化到生活中运用

结语

本场文章中，并没有特别去讲解代码以及某个单独的技术点，而是对于技能的宽度和发展深度进行一些讲解。要成为一个高级前端，付出是必不可少的。

不存在你看过什么就能让你成为一个优秀的前端，只需要你看过的每一个内容都有价值，都能让你有所收获，那么坚持，你就能够成为一个优秀的前端工程师。

前端视频资料：https://www.youtube.com/channel/UCPCQoZjpj4fAlO7XIHYDz5g