前端技术体系与发展计划

为什么会想起来整理这么一套东西

基于博客来制作的公开课视频已经上线，如果你不想枯燥的看博客，那么可以直接访问 《前端技术体系与发展计划公开课》

---

最近和很多已经工作了的同学聊天，发现大家都遇到了很多的问题或者说是烦恼。整理了一下，大体可以分为两个大的种类：

1. 关于前端技术体系的问题
2. 关于技术能力发展的问题

从这些问题中，我抽出来几个比较具有代表性的，我们先来看一下

关于前端技术体系的问题

同学A：
前端的技术太杂了，各种技术更新太快，感觉一个新的技术还没有学完，就已经过时了。完全学不过来

---

同学B：
学不动啦，vue 2.x 还没有搞清楚呢，vue 3.0 就又要来了，react 还没有学过，node 也不会，还有各种新的概念比如：大前端、微前端、serverLess、前端工程化…这些都没有接触过

---

同学C：
非常羡慕大厂的同学，接触的技术深，管理和流程规范，技术面也广，不像自己整天在小公司里面写 if-else

关于技术能力发展的问题

同学A：
工作了3年了，感觉什么都会了，又觉得自己什么都不会，不知道如何进行提升

---

同学B：
天天写业务代码，公司的技术栈很老旧，感觉跟不上时代，也没有什么技术含量，也没有什么沉淀，成长的太慢了

---

同学C：
对框架原理层的东西接触的太少，工作上也接触不到，感觉只是在做代码的搬运工，根本无法突破现在的技术阶层

这些问题我也进行了思考，我觉得他们应该并不是小众，而是一个大众化普遍会遇到的问题。包括我，我当年也遇到过类似的问题。

重点

• 那么这样一个大众化的问题（技术体系不清晰、发展过程不明确）我们应该如何去进行处理？
• 前端的技术体系究竟都包含了那些内容？
• 我们当前的技术能力可以满足哪些需求？处在哪一个位置？

如果你也有这样的疑惑的话，那么这篇文章或许会帮助到你

讲解方式

我们会从三个方面来去说明上面的问题：

1. 前端的技术体系
2. 前端工程师的发展计划
3. 以上问题的解决方案或者说是个人建议

大家可以根据自己的情况，直接跳到对应的模块中。

脑图大纲

整个博客的内容，我整理出来了一个脑图。大家如果觉得看下面的内容过于繁琐的话，那么可以直接看这个脑图。

脑图相当于是一个简化版的文章内容，包含了文章中所有的知识点。如果看到某个内容节点时有所疑惑的话，那么再去看具体的文章内容，这样也不失为一种好的方法。

前端的技术体系

对于前端技术体系这块，我把它主要分成了 6 个方面：

1. PC 端技术
2. 移动端技术
3. 服务端技术
4. 优化技术
5. 监控技术
6. 工程化技术

而整个前端的体系也是针对这 6 个方面来去解释的。

部分技术点可能同时属于多个方面，这一类的技术点我就根据自己的理解放入到了我认为合理的位置了

PC 端技术

首先我们先来看 PC 端技术，对于现在的 PC 端来说，我们可以主要把内容分成两块：

1. 以 jQuery 为代表的一系列高兼容性框架（或者说是库）
2. MVVM 框架，如 Angular、React、Vue（排名不分先后），这一块内容，以 Vue 为例进行解释

以 jQuery 为代表的一系列高兼容性框架（或者说是库）

这一类框架对于维护老系统的同学（以政府项目或国企项目为主 ）来说应该非常的熟悉，虽然说现在越来越多的项目已经不再考虑兼容 IE9 这种老的浏览器了，但是对于一些老系统来说，因为历史遗留问题，或业务兼容问题，根本无法忽略掉 IE 浏览器的兼容。

所以说这一类的技术依然是无法被忽略的一块，毕竟 技术永远是为业务来进行服务的，虽然可能大家都非常讨厌这一块的内容。

以 Vue 为例的一系列 MVVM 框架

这一块是目前使用率最多，也是最被大家所接受的。它们大大的提高了前端的开发效率，并且增加了前端的开发壁垒。可以说没有它们，就没有现在的前端开发环境。

在现在如果你想要找一份前端的工作的话，那么这三大框架你至少要熟悉一个。

如果你是双非院校（非985、211）的话，那么我个人建议你学习 Vue，因为对于国内大部分的中小企业来说，Vue 的占有率是非常高的。

而如果你是 985、211 学校的话，那么 Vue 或者 React 均可。

对于 Angular ，因为在国内的占有率并不高，所以如果你是以找一份工作为主的话，那么我个人不建议你去专攻 Angular 。

它们中任何一个框架，整体的内容如果展开的话，那么都会非常的多。还是以 Vue 为例，周边知识大体可以分为三个大块：

1. 根据渲染模式的不同，我们需要了解两部分：
   1. 单页应用：SPA
   2. 基于服务端的渲染：SSR
2. Vue 全家桶知识：
   1. 路由管理：VueRouter
   2. 全局状态管理：Vuex
   3. 脚手架工具：@vue/cli
3. 组件库部分：
   1. 比如：Element-UI
   2. 比如：Vuetify
   3. 比如：vant-ui

当然除了这些之外，其他的周边库还有很多，比如 网络请求库：axios 等等，这些都是需要大家去进行掌握的。

移动端技术

对于移动端技术来说，目前主要有两个方向：

1. 以 微信小程序 为代表的小程序技术
2. 跨平台技术

那么对于移动端技术来说，我们也是以这两个方向来去说。

以 微信小程序 为代表的小程序技术

微信小程序在 2017 年发布，在 2018 年大火，整个的发展速度是非常快的。这也从一方面验证了 每间隔16个月，学习前端的难度会增加一倍 的这句话。整个前端无时无刻不再有新的技术、新的概念被提出，所以我觉得，前端开发工程师应该是站在潮流最前端的一批人。

小程序最初以 原生 的方式进行开发，后来逐渐出现了一批基于小程序的框架，如果你是一个小程序开发为主的前端工程师，那么以下知识点，你是必须要掌握的：

1. 小程序原生开发
2. 小程序框架开发（比如：wepy、mpvue）
3. 小程序 UI 库（比如：WeUI、Vant weapp、iView weapp）

跨平台技术

跨平台技术的提出主要是为了解决 移动端设备碎片化 的问题，什么是 移动端设备碎片化 呢？给大家举个简单的例子：

目前移动端的设备，主要分成两块
1、Android
2、IOS
而对于任何一端来说，又分为 原生应用（APP） 和 网页应用 ，同时还多了一个 小程序（虽然小程序的设计之初也有为了解决 移动端设备碎片化 问题的原因） 。
如果我们为每一种应用方式都开发一个版本的话，那么我们就需要大约 4 个应用的维护。这样的一个成本是任何一家中小型企业都难以接受的。
所以大家一直期望，有一种方式可以开发一个应用，但同时运行在多个设备之中。

基于这种原因，才出现了所谓的跨平台技术。

跨平台技术的出现，旨在解决 一个项目无法同时作用于多种不同设备之上 的问题。所以在刚出现的时候市场上被接受和尝试的声音非常的多（毕竟这对于公司来说，代表省钱）。

不过，虽然这些技术号称可以达到原生应用同样的体验，但是因为不同设备之间的差异化，导致最终开发出来的成果总是无法满足线上项目的需求。

所以在目前跨平台的技术只是在小范围的进行使用。

整个跨平台技术方案中，目前主要流行的有以下 4 种：

1. React Native
2. Flutter
3. Weex
4. uni-app (一套代码编到8个平台)

服务端技术

对于服务端技术的话，有很多的前端工程师都不是特别的清楚。因为在很多前端工程师眼中 服务端的内容应该是属于后台的东西 ，如果你也有这种想法的话，那么 趁早丢弃 。

试想一个场景，身为一个软件开发工程师，假如有一天，你有了一个点子，想要通过技术来实现的时候。突然发现，你只会写前端的内容，对后台服务一无所知。你不得不求助于服务端工程师。这是不是一种悲剧。

所以说 服务端技术 可能在你的初期对你帮助不大，但是当你在技术领域越来越深入的时候，它是必不可少的内容。

目前针对于前端工程师的服务端技术有非常的多，如果你想要学习服务端技术的话，那么可以从以下四个方面来着手：

1. Node.js，大体可以分成两个框架方向：
   1. Express
   2. KOA
2. 数据库知识，目前的数据库同样分成了两块大的方向：
   1. SQL 型数据库，推荐：MySql
   2. NO SQL 型数据库，推荐：MongoDB，Redis
3. 服务器：
   1. Apache
   2. Nginx (重点推荐)，针对于 Nginx 来说，你至少需要掌握两点：
      1. 单页应用的部署
      2. 反向代理 / 跨域处理
4. 云概念（个人认为：云概念是未来的主要方式），云概念至少需要掌握以下 5 点：
   1. 云服务器
      1. 标准 ECS 云服务器
      2. 应用云服务器
   2. 云数据库
      1. SQL 型
      2. NO SQL 型
   3. 云存储服务
      1. OSS：对象存储
      2. NAS：文件存储
   4. ServerLess：无服务结构（小程序云开发是一个很好的切入点）
   5. CDN 服务

优化技术

如果你想要在工作中获取到更好的评级，那么优化技术是必不可少的。

这里所说的优化技术主要 针对网页访问速度的优化 和 用户误操作规避的优化，这两点的内容应该比好理解。

优化技术这一块如果展开说就非常的大了， 因为它所涉及到的知识点会非常的多，并且根据不同的场景也会有很多定向优化的内容，所以这里我就简单的列举出来几个方向，仅供大家参考：

1. 静态资源优化
2. 接口访问优化
3. 页面渲染速度优化
4. 防抖 / 节流方案

具体的内容，大家可以自行百度，这里就不详细说了。

监控技术

这一块的内容，可能很多两三年左右开发经验的同学很少了解过。先简单的做一个定义。

什么叫做监控技术呢？

当我们的项目上线之后：
到底有多少人来访问？
项目出现过多少次catch？
用户在哪个页面停留的时间比较长？
等等…

获取这些数据的方式我们就称为：数据监控技术，这里简称 监控技术。

看到这里，可能有很多同学会说：“我要这些东西有什么用啊？”。

你如果只作为一个码农角色的话，那么确实没有用。但是如果你站在开发者的角度、或者 项目所有人 的角度来看的话，那么这些数据是非常重要的依据。基于这些数据来完成的 数据可视化平台 ，也是现在非常重要的一个方向。

说了这么多，那么如何实现数据监控呢？ 实现数据监控的方式主要可以分成两种：

1. 自定义数据监控
2. 使用现成的第三方监控平台（前期推荐使用）

如果你对监控技术刚刚接触，或者处于项目前期的话，那么我个人推荐你使用 现成的第三方监控平台，这一类的平台有很多，简单列出三个：

1. 百度统计
2. 诸葛IO
3. GrowingIO

为什么会这么推荐呢？很简单，两个字 简单 。因为简单，你可以快速上手。因为简单，你可以不用花大量的时间去进行测试、逻辑编写。因为对于监控技术，是一套非常复杂的技术体系。仅对于 埋点 这一块来说，就可以分为：

1. 无埋点
2. 全埋点
3. 自定义埋点

三个大的方面。

所以对于前期，我更推荐大家直接使用现有的第三方平台。当这些平台无法满足你的需求的时候，可以考虑自己实现。

工程化技术

如果你不是 leader 的话，那么工程化技术你接触的可能也会比较少。

什么是工程化呢？

比如说：
你的代码提交到 Git ，那么这个 Git 平台是怎么搭建的？
你的代码提交，如果不合规（死链或者代码格式不合规），如何避免被提交？
代码部署这种重复的工作如何自动化？
新版本上线如何最大程度的减轻 BUG 出现导致大面积崩溃的风险？
如果真的出现了大面的崩溃，如何快速的返回上一个稳定版本？
等等…

这些场景，我们都可以称之为是属于 前端工程化 的一部分

工程化代表的应该是一整套前端从开发到上线的全流程。目前的工程化以自动工程化为主。也就是说你的开发、测试、部署等等，全部都自动化。

这一整套的自动化工程，就可以称为是一套 工程化技术。

在很多的中小公司中，工程化的流程并不规范，存在非常多的问题。这点对大家来说，应该是一个好事情，如果你熟练地掌握了 工程化技术，那么你就会拥有更多的 技术资本 。

工程化技术方面，简单的给大家进行一下列举：

1. 代码托管平台搭建
   1. Gitlab
2. 自动化工具
   1. 合规检测
      1. ESLint 提交检测
      2. 兼容性检测
      3. 死链检测
   2. 自动化测试
   3. 自动化部署
      1. CI：持续集成
      2. CD：持续部署
3. 产品迭代方面
   1. 灰度发布
   2. A/B 测试

技术体系总结

以上这些就是整个前端技术体系的内容，整体来看是非常大的一块内容点。那么这么多的技术点，我们应该从哪一块入手？从哪一块开始学习呢？

这就是我们接下来要说的内容，也就是 前端发展计划 的部分

前端发展计划

对于前端发展计划这里，我不打算给大家进行分类。什么叫分类呢？

比如很多人会告诉你：

• 一年（工作经验）以下你应该学习什么？
• 一到三年你应该学习什么？
• 三到五年你应该学习什么？

这种方式就叫做分类，根据你的工作年限，来告诉你你应该学习什么技术了。

我觉得如果按照这种方式来制定发展计划的话，那么是 不准确 的。因为，每个人根据所处环境的不同，那么成长的速度是不一样的，我们不能够简单的通过 工作时长 这样一个 定向 的标准来进行划分。

那么我们应该怎么做呢？

首先：发展计划应该和当 前的技术体系 是息息相关的。比如说： 2016 年的时候，我们只会 jQuery 可能就能找到一份工作，但是现在你至少要会 三大框架中的一种才可以。前端的技术无时无刻不在变化，那么我们的发展计划也会跟随技术体系来对应改变。

其次：发展计划的制定应该以你个人的 当前技术水平 和 下阶段目标 为标准。比如：你当前只会 jQuery ， 然后你想要找到一份工作。那么你当前最应该学习的应该是三大框架中的一种，比如 Vue 。

以上的这两点和你的工作年限没有一点关系。

那么发展计划这里，我们怎么去讲呢？

我把整个前端的发展计划分成了 6 个阶段，我们先来看一下：

1. 基础知识
2. 工作知识
3. 进阶知识
4. 底层知识
5. 新兴知识
6. 未来展望

每个阶段后面，又会包含一些具体的知识点（参考顶部脑图）。

每个阶段代表你当前所处的区域，

1. 假如：你想要入门前端的话，那么你首先需要掌握的就是 基础知识。
2. 假如：你希望找到一份前端工程师的工作的话，那么你就必须要掌握 工作知识 的内容
3. 假如：你希望在工作中更近一层，比如担任 高级软件开发工程师，那么你就应该开始学习 进阶知识 或者 底层知识 的内容
4. 假如：你希望担任前端 leader ，那么你就必须要实时关心 新兴知识的内容

这个就是我根据大家的 当前技术水平 和 下阶段目标 为标准，来制作的 发展计划，我觉得按照这种方式，应该是最具有逻辑性的。

那么下面我们就分别的来看一下这六个阶段详细的内容。

基础知识

如果你当前还没有接触过前端，接下来打算学习前端知识点的话，那么你就应该从基础知识入手

基础知识阶段作为我们的第一站，面向的是没有前端开发经验的同学，如果你之前没有接触过前端开发，并且想要通过学习前端来找过一份工作的话，那么你就应该从基础知识来入手。

对于基础知识，你需要掌握的主要有两大部分：

1. HTML + CSS ：这是基础中的基础，是必须要掌握的
2. JavaScript： JS 作为前端的核心语言，用来处理所有逻辑相关的问题，是入门前端的一个必备内容

从这两块开始学习，一直到可以熟练掌握，然后在进入下一个阶段。

那么达到什么样的标准，才能够称为基础知识过关了呢？

检验是否过关最好的标准应该是 项目 ， 每一个阶段都应该有对应的项目，但是我们这里没有办法给大家去指定项目，大家可以根据自己的情况来去自己指定。

我这里简单的列出一些标准的知识点，如果说你想要验证 基础知识 是否过关，那么可以看一下，以下知识点，你是否可以掌握：

1. HTML + CSS 部分
   1. Flex 布局
   2. 基础的响应式处理
   3. div 垂直居中展示
   4. 图片之间的缝隙处理
   5. 相邻块元素外边距合并的问题
   6. 嵌套款元素边距塌陷的问题
2. JavaScript 部分
   1. 闭包的概念
   2. 原型的概念
   3. 同步、异步、EventLoop

当然，我这里列出的只是很小的一部分。如果大家不知道如何验证的话，那么可以用作参考。

工作知识

如果你当前已经完成了基础知识的学习，接下来打算找到一份前端开发的工作的话，那么你就应该开始工作知识的学习了

在文章的前面说过，如果想要找到一份前端开发者的工作的话，那么你至少需要掌握三大框架（Angular、React、Vue）中的一个。

咱们还是以 Vue 为例，Vue 本身包含了很多的知识点，并不仅仅只是一个 Vue.js 这么简单。在 技术体系 中我们也说到了，Vue 是一个生态，它有自己的 全家桶、周边库、UI 库、组件库 等等非常多的周边生态，具体要学习哪些内容，可以参考 技术体系 中说到的部分。

除了这三大框架之外，UI 库 也是必须要掌握的一门知识，UI 库的种类有很多，我们只需要掌握一到两个就可以，具体的选择可以参考我之前的博客 浅谈前端八大UI库 。

最后就是 小程序技术 和 跨平台技术 了，这两块的知识点是作为一个加分项存在的。

以上的内容你掌握的越全面，那么你在找工作的时候，可选择的范围也就越广。

所以说以上的内容 并不是都要全部掌握 之后，才可以开始找工作。有可能你只掌握了 小程序 开发、或者 Vue 你就找到了一份工作，这也是可能的。

掌握的越全面，可选择的范围就越广

进阶知识 和 底层知识

如果你当前已经有了一份工作，接下来打算拥有更高的薪资的话，那么你就应该开始学习 进阶知识 和 底层知识了

进阶知识、底层知识 我放到了一起来说。因为我觉得他们两个对应的 下阶段目标 一致，并且是可以穿插着来进行学习的。

进阶知识 主要针对于 工作中的实战 多一些，也就是内容更加实在，在实际工作中会经常的用到。

底层知识 主要针对 面试 的内容多一些，里面涉及到的很多内容有类似于面试宝典的感觉。比如说 二叉树、链表 这些内容，在实际的工作中，其实帮助不大。

那么下面我们就分别针对这两块来说一下：

进阶知识

首先我们来看进阶知识。进阶知识主要针对工作中的实际应用场景。

以 ES6 为例，不会 ES6 会导致你无法完成工作吗？ 不会！ 但是你想要更好的完成工作，你不会 ES6 的语法，那么可以吗？ 不可以！

这就是进阶知识在实际工作中的作用，一般情况下它不会导致你的工作无法完成，但是它可以帮助你更高质量的完成工作。

所以如果你想要在职场上，更近一步的话，那么就需要学习 进阶知识 了。

下面我列出来一部分进阶知识的内容：

1. TypeScript
2. ES6
3. CSS 预处理器
   1. Scss
   2. Less
   3. Stylus
4. 思想层面
   1. 组件化思想
   2. 数据驱动思想

底层知识

底层知识 的内容更倾向于 面试 时的场景。因为他里面有很多的知识点在你平常的工作中是没有直接使用场景的。

比如 二叉树、红黑树 、链表 的概念，这些底层内容看起来好复杂，但是在实际工作中其实没啥用。

不过这些概念性的东西在 面试 中反而会经常的出现，特别是在一些 大厂 的面试中，也就是所谓的 面试造火箭，工作拧螺丝 的概念。

底层知识 的内容，不打算介绍太多，具体涉及到的常见内容 大家可以看上面的脑图，我这里就不进行列举了。

如果大家最近有考虑换工作，进行面试的场景的话，那么可以突击一下 底层知识。

新兴知识

然后我们来看 新兴知识。前端的技术发展是非常快的，这个在咱们前面的文章中，也体现过。那么快速的发展必然会带来很多新的概念、新的知识点。这一类的知识我统一称为新兴知识。

举个简单的列子，以小程序为例，在 2017 年的时候微信提出了小程序的概念，那么假设我们现在处于 2017 年，小程序就属于 新兴知识。而我们现在处于 2020 年，小程序就已经变成了 工作知识 了。

所以 新兴知识 它会随着时间来不断地发生变化。 同时大家也要知道对于新兴知识，并不是都会像小程序一样变成 工作知识。有些新兴的概念，并不会那么适应大众，逐渐的变为小众化的技术，比如 React Native 。

同样的道理对于其他的知识也一样，jQuery 当年是必备的工作知识，现在也不过是为了维护老系统而被迫使用的知识点而已。

所以对于前端的学习，大家必须要能够保证时刻的进步状态，千万不能 想着 一劳永逸。

目前比较流行的新概念主要有三个：

1. 大前端
2. 微前端
3. ServerLess：无服务架构

这三个知识点，大家可以进行一下了解，然后根据自己的实际情况进行 选择性 的重点学习。

未来展望

未来展望 主要建立在 新兴知识 的基础之上。因为只有 新兴知识才能改变未来 。以后的开发模式，谁也说不准，我这里结合我自己的理解，说一下我个人认为未来的前端路会怎么走。

1. 大前端概念盛行：现有的移动端（Android、IOS）原生开发工程师、小程序开发工程师都会逐渐的融入到前端的概念中，也就是共同组成 大前端
2. ServerLess （无服务架构）会在中小企业中盛行，因为 ServerLess 大大改变了前后端交互的方式，最直接的就是 省钱了！

对于前端未来的开发模式，每个人都会有自己不同的看法，以上两点仅是我个人看法，不代表任何组织和机构，也欢迎大家在留言区留言探讨。

发展计划总结

以上就是整个 前端工程师发展计划 的内容，大家可以根据自己所处的阶段，来参照对应的计划。

最后在强调一句，技术的能力与工作的时间并不是正比的关系。在很多情况下 工作会让你更加熟练，但不会让你真正成长！

解决方案

说了那么多了，到现在已经有了 8000 多字了。如果大家能够一点一点的看到现在，那么我真的要为大家竖起大拇指了！

那么最后让我们回到最初的问题上：

1. 前端技术体系问题
2. 技术能力发展问题

这两类的问题我们应该如何进行解决呢？

因为每个人的所处场景不同，所以我不能直接用一个统一的答案来告诉大家怎么办。我在这里总结了我个人这么多年以来的一些感悟，总结之后整理了 4 条，或许可能对大家有所帮助：

1. 养成整理和总结的习惯，很多新的技术栈只是在原有的基础上做了提升，用于解决更多复杂的业务，本质上的变化，其实远没有大家想想的那么大
2. 新的技术出现并且被大规模的接受，或者现有技术的升级，必然需要满足两个条件中的至少一个
   1. 学习成本降低
   2. 解决复杂业务的能力提升
3. 复杂的技术是为了解决复杂的业务，这一点在以 java 为主的后端尤其明显，这也是大厂所带来的优势。但是对于前端来说，大小厂之间的复杂业务场景并没有那么大的差距，为自己指定规范（文档规范、编码规范、git规范、安全规范、组件规范等等），然后善加利用搜索引擎，多做总结
4. 善加利用搜索引擎，基于互联网的学习可以弥补所处环境的不足。你遇到的几乎所有的问题或你想要学习的几乎所有的新的技能，都可以在互联网上得到

---

最后给自己的课打个广告：

无需原生开发基础，也能完美呈现京东商城。《混合开发京东商城系统，提前布局大前端》课程融合vue、Android、IOS等目前流行的前端和移动端技术，混合开发经典电商APP——京东。课程将各种复杂功能与知识点完美融合，从技术原理到开发上线，让你真实感受到一个明星产品开发的全过程。功能实现之外，还有一流用户体验和优秀交互设计等你一探究竟，拓宽开发眼界。