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

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

从这些问题中，我抽出来几个比较具有代表性的，我们先来看一下
关于前端技术体系的问题

同学A：

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



同学B：

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



同学C：

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

关于技术能力发展的问题

同学A：

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



同学B：

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



同学C：

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

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

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

如果你也有这样的疑惑的话，那么这篇文章或许会帮助到你
讲解方式
我们会从三个方面来去说明上面的问题：

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

大家可以根据自己的情况，直接跳到对应的模块中。
脑图大纲
整个博客的内容，我整理出来了一个脑图。大家如果觉得看下面的内容过于繁琐的话，那么可以直接看这个脑图。
脑图相当于是一个简化版的文章内容，包含了文章中所有的知识点。如果看到某个内容节点时有所疑惑的话，那么再去看具体的文章内容，这样也不失为一种好的方法。

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

PC 端技术
移动端技术
服务端技术
优化技术
监控技术
工程化技术

而整个前端的体系也是针对这 6 个方面来去解释的。
部分技术点可能同时属于多个方面，这一类的技术点我就根据自己的理解放入到了我认为合理的位置了
PC 端技术
首先我们先来看 PC 端技术，对于现在的 PC 端来说，我们可以主要把内容分成两块：

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

以 jQuery 为代表的一系列高兼容性框架（或者说是库）
这一类框架对于维护老系统的同学（以政府项目或国企项目为主 ）来说应该非常的熟悉，虽然说现在越来越多的项目已经不再考虑兼容 IE9 这种老的浏览器了，但是对于一些老系统来说，因为历史遗留问题，或业务兼容问题，根本无法忽略掉 IE 浏览器的兼容。
所以说这一类的技术依然是无法被忽略的一块，毕竟 技术永远是为业务来进行服务的，虽然可能大家都非常讨厌这一块的内容。


以 Vue 为例的一系列 MVVM 框架
这一块是目前使用率最多，也是最被大家所接受的。它们大大的提高了前端的开发效率，并且增加了前端的开发壁垒。可以说没有它们，就没有现在的前端开发环境。
在现在如果你想要找一份前端的工作的话，那么这三大框架你至少要熟悉一个。
如果你是双非院校（非985、211）的话，那么我个人建议你学习 Vue，因为对于国内大部分的中小企业来说，Vue 的占有率是非常高的。
而如果你是 985、211 学校的话，那么 Vue 或者 React 均可。
对于 Angular ，因为在国内的占有率并不高，所以如果你是以找一份工作为主的话，那么我个人不建议你去专攻 Angular 。
它们中任何一个框架，整体的内容如果展开的话，那么都会非常的多。还是以 Vue 为例，周边知识大体可以分为三个大块：

根据渲染模式的不同，我们需要了解两部分：

单页应用：SPA
基于服务端的渲染：SSR


Vue 全家桶知识：

路由管理：VueRouter
全局状态管理：Vuex
脚手架工具：@vue/cli


组件库部分：

比如：Element-UI
比如：Vuetify
比如：vant-ui



当然除了这些之外，其他的周边库还有很多，比如 网络请求库：axios 等等，这些都是需要大家去进行掌握的。
移动端技术
对于移动端技术来说，目前主要有两个方向：

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

那么对于移动端技术来说，我们也是以这两个方向来去说。
以 微信小程序 为代表的小程序技术
微信小程序在 2017 年发布，在 2018 年大火，整个的发展速度是非常快的。这也从一方面验证了 每间隔16个月，学习前端的难度会增加一倍 的这句话。整个前端无时无刻不再有新的技术、新的概念被提出，所以我觉得，前端开发工程师应该是站在潮流最前端的一批人。
小程序最初以 原生 的方式进行开发，后来逐渐出现了一批基于小程序的框架，如果你是一个小程序开发为主的前端工程师，那么以下知识点，你是必须要掌握的：

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

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

目前移动端的设备，主要分成两块

1、Android

2、IOS

而对于任何一端来说，又分为 原生应用（APP） 和 网页应用 ，同时还多了一个 小程序（虽然小程序的设计之初也有为了解决 移动端设备碎片化 问题的原因） 。

如果我们为每一种应用方式都开发一个版本的话，那么我们就需要大约 4 个应用的维护。这样的一个成本是任何一家中小型企业都难以接受的。

所以大家一直期望，有一种方式可以开发一个应用，但同时运行在多个设备之中。

基于这种原因，才出现了所谓的跨平台技术。
跨平台技术的出现，旨在解决 一个项目无法同时作用于多种不同设备之上 的问题。所以在刚出现的时候市场上被接受和尝试的声音非常的多（毕竟这对于公司来说，代表省钱）。
不过，虽然这些技术号称可以达到原生应用同样的体验，但是因为不同设备之间的差异化，导致最终开发出来的成果总是无法满足线上项目的需求。
所以在目前跨平台的技术只是在小范围的进行使用。
整个跨平台技术方案中，目前主要流行的有以下 4 种：

React Native
Flutter
Weex
uni-app (一套代码编到8个平台)

服务端技术
对于服务端技术的话，有很多的前端工程师都不是特别的清楚。因为在很多前端工程师眼中 服务端的内容应该是属于后台的东西 ，如果你也有这种想法的话，那么 趁早丢弃 。
试想一个场景，身为一个软件开发工程师，假如有一天，你有了一个点子，想要通过技术来实现的时候。突然发现，你只会写前端的内容，对后台服务一无所知。你不得不求助于服务端工程师。这是不是一种悲剧。
所以说 服务端技术 可能在你的初期对你帮助不大，但是当你在技术领域越来越深入的时候，它是必不可少的内容。
目前针对于前端工程师的服务端技术有非常的多，如果你想要学习服务端技术的话，那么可以从以下四个方面来着手：

Node.js，大体可以分成两个框架方向：

Express
KOA


数据库知识，目前的数据库同样分成了两块大的方向：

SQL 型数据库，推荐：MySql
NO SQL 型数据库，推荐：MongoDB，Redis


服务器：

Apache
Nginx (重点推荐)，针对于 Nginx 来说，你至少需要掌握两点：

单页应用的部署
反向代理 / 跨域处理




云概念（个人认为：云概念是未来的主要方式），云概念至少需要掌握以下 5 点：

云服务器

标准 ECS 云服务器
应用云服务器


云数据库

SQL 型
NO SQL 型


云存储服务

OSS：对象存储
NAS：文件存储


ServerLess：无服务结构（小程序云开发是一个很好的切入点）
CDN 服务



优化技术
如果你想要在工作中获取到更好的评级，那么优化技术是必不可少的。
这里所说的优化技术主要 针对网页访问速度的优化 和 用户误操作规避的优化，这两点的内容应该比好理解。
优化技术这一块如果展开说就非常的大了， 因为它所涉及到的知识点会非常的多，并且根据不同的场景也会有很多定向优化的内容，所以这里我就简单的列举出来几个方向，仅供大家参考：

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

具体的内容，大家可以自行百度，这里就不详细说了。
监控技术
这一块的内容，可能很多两三年左右开发经验的同学很少了解过。先简单的做一个定义。
什么叫做监控技术呢？

当我们的项目上线之后：

到底有多少人来访问？

项目出现过多少次catch？

用户在哪个页面停留的时间比较长？

等等…

获取这些数据的方式我们就称为：数据监控技术，这里简称 监控技术。
看到这里，可能有很多同学会说：“我要这些东西有什么用啊？”。
你如果只作为一个码农角色的话，那么确实没有用。但是如果你站在开发者的角度、或者 项目所有人 的角度来看的话，那么这些数据是非常重要的依据。基于这些数据来完成的 数据可视化平台 ，也是现在非常重要的一个方向。
说了这么多，那么如何实现数据监控呢？ 实现数据监控的方式主要可以分成两种：

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

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

百度统计
诸葛IO
GrowingIO

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

无埋点
全埋点
自定义埋点

三个大的方面。
所以对于前期，我更推荐大家直接使用现有的第三方平台。当这些平台无法满足你的需求的时候，可以考虑自己实现。
工程化技术
如果你不是 leader 的话，那么工程化技术你接触的可能也会比较少。
什么是工程化呢？

比如说：

你的代码提交到 Git ，那么这个 Git 平台是怎么搭建的？

你的代码提交，如果不合规（死链或者代码格式不合规），如何避免被提交？

代码部署这种重复的工作如何自动化？

新版本上线如何最大程度的减轻 BUG 出现导致大面积崩溃的风险？

如果真的出现了大面的崩溃，如何快速的返回上一个稳定版本？

等等…

这些场景，我们都可以称之为是属于 前端工程化 的一部分
工程化代表的应该是一整套前端从开发到上线的全流程。目前的工程化以自动工程化为主。也就是说你的开发、测试、部署等等，全部都自动化。
这一整套的自动化工程，就可以称为是一套 工程化技术。
在很多的中小公司中，工程化的流程并不规范，存在非常多的问题。这点对大家来说，应该是一个好事情，如果你熟练地掌握了 工程化技术，那么你就会拥有更多的 技术资本 。
工程化技术方面，简单的给大家进行一下列举：

代码托管平台搭建

Gitlab


自动化工具

合规检测

ESLint 提交检测
兼容性检测
死链检测


自动化测试
自动化部署

CI：持续集成
CD：持续部署




产品迭代方面

灰度发布
A/B 测试



技术体系总结
以上这些就是整个前端技术体系的内容，整体来看是非常大的一块内容点。那么这么多的技术点，我们应该从哪一块入手？从哪一块开始学习呢？
这就是我们接下来要说的内容，也就是 前端发展计划 的部分
前端发展计划
对于前端发展计划这里，我不打算给大家进行分类。什么叫分类呢？
比如很多人会告诉你：

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

这种方式就叫做分类，根据你的工作年限，来告诉你你应该学习什么技术了。
我觉得如果按照这种方式来制定发展计划的话，那么是 不准确 的。因为，每个人根据所处环境的不同，那么成长的速度是不一样的，我们不能够简单的通过 工作时长 这样一个 定向 的标准来进行划分。
那么我们应该怎么做呢？
首先：发展计划应该和当 前的技术体系 是息息相关的。比如说： 2016 年的时候，我们只会 jQuery 可能就能找到一份工作，但是现在你至少要会 三大框架中的一种才可以。前端的技术无时无刻不在变化，那么我们的发展计划也会跟随技术体系来对应改变。
其次：发展计划的制定应该以你个人的 当前技术水平 和 下阶段目标 为标准。比如：你当前只会 jQuery ， 然后你想要找到一份工作。那么你当前最应该学习的应该是三大框架中的一种，比如 Vue 。
以上的这两点和你的工作年限没有一点关系。
那么发展计划这里，我们怎么去讲呢？
我把整个前端的发展计划分成了 6 个阶段，我们先来看一下：

基础知识
工作知识
进阶知识
底层知识
新兴知识
未来展望

每个阶段后面，又会包含一些具体的知识点（参考顶部脑图）。
每个阶段代表你当前所处的区域，

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

这个就是我根据大家的 当前技术水平 和 下阶段目标 为标准，来制作的 发展计划，我觉得按照这种方式，应该是最具有逻辑性的。
那么下面我们就分别的来看一下这六个阶段详细的内容。
基础知识

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

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

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

从这两块开始学习，一直到可以熟练掌握，然后在进入下一个阶段。
那么达到什么样的标准，才能够称为基础知识过关了呢？
检验是否过关最好的标准应该是 项目 ， 每一个阶段都应该有对应的项目，但是我们这里没有办法给大家去指定项目，大家可以根据自己的情况来去自己指定。
我这里简单的列出一些标准的知识点，如果说你想要验证 基础知识 是否过关，那么可以看一下，以下知识点，你是否可以掌握：

HTML + CSS 部分

Flex 布局
基础的响应式处理
div 垂直居中展示
图片之间的缝隙处理
相邻块元素外边距合并的问题
嵌套款元素边距塌陷的问题


JavaScript 部分

闭包的概念
原型的概念
同步、异步、EventLoop



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

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

在文章的前面说过，如果想要找到一份前端开发者的工作的话，那么你至少需要掌握三大框架（Angular、React、Vue）中的一个。
咱们还是以 Vue 为例，Vue 本身包含了很多的知识点，并不仅仅只是一个 Vue.js 这么简单。在 技术体系 中我们也说到了，Vue 是一个生态，它有自己的 全家桶、周边库、UI 库、组件库 等等非常多的周边生态，具体要学习哪些内容，可以参考 技术体系 中说到的部分。
除了这三大框架之外，UI 库 也是必须要掌握的一门知识，UI 库的种类有很多，我们只需要掌握一到两个就可以，具体的选择可以参考我之前的博客 浅谈前端八大UI库 。
最后就是 小程序技术 和 跨平台技术 了，这两块的知识点是作为一个加分项存在的。
以上的内容你掌握的越全面，那么你在找工作的时候，可选择的范围也就越广。
所以说以上的内容 并不是都要全部掌握 之后，才可以开始找工作。有可能你只掌握了 小程序 开发、或者 Vue 你就找到了一份工作，这也是可能的。
掌握的越全面，可选择的范围就越广
进阶知识 和 底层知识

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

进阶知识、底层知识 我放到了一起来说。因为我觉得他们两个对应的 下阶段目标 一致，并且是可以穿插着来进行学习的。
进阶知识 主要针对于 工作中的实战 多一些，也就是内容更加实在，在实际工作中会经常的用到。
底层知识 主要针对 面试 的内容多一些，里面涉及到的很多内容有类似于面试宝典的感觉。比如说 二叉树、链表 这些内容，在实际的工作中，其实帮助不大。
那么下面我们就分别针对这两块来说一下：
进阶知识
首先我们来看进阶知识。进阶知识主要针对工作中的实际应用场景。
以 ES6 为例，不会 ES6 会导致你无法完成工作吗？ 不会！ 但是你想要更好的完成工作，你不会 ES6 的语法，那么可以吗？ 不可以！
这就是进阶知识在实际工作中的作用，一般情况下它不会导致你的工作无法完成，但是它可以帮助你更高质量的完成工作。
所以如果你想要在职场上，更近一步的话，那么就需要学习 进阶知识 了。
下面我列出来一部分进阶知识的内容：

TypeScript
ES6
CSS 预处理器

Scss
Less
Stylus


思想层面

组件化思想
数据驱动思想



底层知识
底层知识 的内容更倾向于 面试 时的场景。因为他里面有很多的知识点在你平常的工作中是没有直接使用场景的。
比如 二叉树、红黑树 、链表 的概念，这些底层内容看起来好复杂，但是在实际工作中其实没啥用。
不过这些概念性的东西在 面试 中反而会经常的出现，特别是在一些 大厂 的面试中，也就是所谓的 面试造火箭，工作拧螺丝 的概念。
底层知识 的内容，不打算介绍太多，具体涉及到的常见内容 大家可以看上面的脑图，我这里就不进行列举了。
如果大家最近有考虑换工作，进行面试的场景的话，那么可以突击一下 底层知识。
新兴知识
然后我们来看 新兴知识。前端的技术发展是非常快的，这个在咱们前面的文章中，也体现过。那么快速的发展必然会带来很多新的概念、新的知识点。这一类的知识我统一称为新兴知识。
举个简单的列子，以小程序为例，在 2017 年的时候微信提出了小程序的概念，那么假设我们现在处于 2017 年，小程序就属于 新兴知识。而我们现在处于 2020 年，小程序就已经变成了 工作知识 了。
所以 新兴知识 它会随着时间来不断地发生变化。 同时大家也要知道对于新兴知识，并不是都会像小程序一样变成 工作知识。有些新兴的概念，并不会那么适应大众，逐渐的变为小众化的技术，比如 React Native 。
同样的道理对于其他的知识也一样，jQuery 当年是必备的工作知识，现在也不过是为了维护老系统而被迫使用的知识点而已。
所以对于前端的学习，大家必须要能够保证时刻的进步状态，千万不能 想着 一劳永逸。
目前比较流行的新概念主要有三个：

大前端
微前端
ServerLess：无服务架构

这三个知识点，大家可以进行一下了解，然后根据自己的实际情况进行 选择性 的重点学习。
未来展望
未来展望 主要建立在 新兴知识 的基础之上。因为只有 新兴知识才能改变未来 。以后的开发模式，谁也说不准，我这里结合我自己的理解，说一下我个人认为未来的前端路会怎么走。

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

对于前端未来的开发模式，每个人都会有自己不同的看法，以上两点仅是我个人看法，不代表任何组织和机构，也欢迎大家在留言区留言探讨。
发展计划总结
以上就是整个 前端工程师发展计划 的内容，大家可以根据自己所处的阶段，来参照对应的计划。
最后在强调一句，技术的能力与工作的时间并不是正比的关系。在很多情况下 工作会让你更加熟练，但不会让你真正成长！
解决方案
说了那么多了，到现在已经有了 8000 多字了。如果大家能够一点一点的看到现在，那么我真的要为大家竖起大拇指了！



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

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

这两类的问题我们应该如何进行解决呢？
因为每个人的所处场景不同，所以我不能直接用一个统一的答案来告诉大家怎么办。我在这里总结了我个人这么多年以来的一些感悟，总结之后整理了 4 条，或许可能对大家有所帮助：

养成整理和总结的习惯，很多新的技术栈只是在原有的基础上做了提升，用于解决更多复杂的业务，本质上的变化，其实远没有大家想想的那么大
新的技术出现并且被大规模的接受，或者现有技术的升级，必然需要满足两个条件中的至少一个

学习成本降低
解决复杂业务的能力提升


复杂的技术是为了解决复杂的业务，这一点在以 java 为主的后端尤其明显，这也是大厂所带来的优势。但是对于前端来说，大小厂之间的复杂业务场景并没有那么大的差距，为自己指定规范（文档规范、编码规范、git规范、安全规范、组件规范等等），然后善加利用搜索引擎，多做总结
善加利用搜索引擎，基于互联网的学习可以弥补所处环境的不足。你遇到的几乎所有的问题或你想要学习的几乎所有的新的技能，都可以在互联网上得到


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

  
​ 最近几年，越来越多的人投入到前端大军中；时至至今，前端工程师的数量仍然不能满足企业的发展需求；与此同时，互联网应用场景的复杂化提高了对前端工程师能力的要求，一部分初期前端工程师并不能胜任企业的工作，优秀的前端工程师一将难求。


​   真正了解前端技术的工程师都会感觉前端技术发展变化太快。浏览器特性、前端框架、前端工具、多终端浏览器等都在快速迭代中。作为前端工程师不仅要掌握现有的技术去实现业务需求，更要不断的学习新的技术、新的理念，时刻准备着新技术浪潮的来临。

​   《现代前端技术解析》提及了作为一个前端工程师需要了解的大部分技能。介绍了从直接性DOM交互框架>>MVC>>MVP>>MVVM>>Virtual DOM>>MNV*等框架演变和实现原理；讲解了前端大型项目实现的思路；引出了前后端同构、Hybrid离线包以及增量更新关键技术的设计思路；并对未来前端趋势做了相关分析和展望。



Web前端技术基础

​   前端开发模式先后经历了静态黄页时期、服务器组装动态网页数据时期、后端为主的MVC（Model-View-Controller）模式时期、前后端分离方案开发时期、纯前端MV*（Model-View-*，数据模型、视图、控制方式分离）时期、最后进入到虚拟DOM时期、MNV*（Model-NativeView-*）时期以及前后端同构的开发时期。



现代Web前端技术发展概述

​   随着越来越多的业务搬到前端实现、前端的代码量越来越多。应运而生的是采用代码管理中分治思想模块化和组件化的出现，将复杂的代码结构拆分成多个对立、简单、解耦合的结构或文件分开管理，使项目结构更加清晰；同时限制首页资源、利用缓存以及局部请求的方式来使用户更快更流畅的使用。

然而，对于移动端我们往往需要考虑更多的限制因素，移动端的劣势：

移动端设备计算资源和网络资源比较有限；
移动端CPU处理速度较慢且网络速度也相对较慢，解析和加载同样的内容需要更长的时间；
移动端浏览器受屏幕大小限制，一次性展示的内容有限；
移动端设备通常没有键盘和鼠标等外接设备，用户交互难度大；
移动端整体性能比PC端要差。
JavaScript在Node.js（Node.js是一个基于Chrome V8引擎的JavaScript运行环境，使用了事件驱动、非阻塞式I/O的模型，使其轻量又高效，它使用的包管理器为npm，是目前全球最大的开源生态系统）服务端也可进行高效的开发，使前后端同构变得可行。

​Web前端技术一直以效率和质量为最终导向的道路上探索前进！



浏览器应用基础

​   通常认为浏览器主要由：用户界面、网络、JavaScript引擎、渲染引擎、UI后端、JavaScript解释器和持久化数据存储七部分组成。浏览器内核往往指的是渲染引擎。

常见的浏览器内核：

Trident内核：IE、360浏览器、搜狗浏览器等
Gecko内核：Netscape6及以上版本、Firefox、SeaMonkey等；
Webkit内核：Safari、Chrome；
Blink内核：Webkit一个分支，优化了一些新特性，移动端较多浏览器采用该内核。 

浏览器渲染引擎工作流程： 

​   

​   渲染引擎对DOM渲染树的解析和输出是逐行进行的，内容越靠前越优先展示，所以为了确保用户体验，通常不要将script脚本插入到HTML显示内容区域，因为script内容的解析执行会阻塞页面结构的渲染。

​   整个过程中，要关注的是渲染树布局和绘制阶段：页面生成后，如果页面位置（position、float、margin等属性）发生变化，就要从布局阶段开始重新渲染，即页面重排。页面重排一定会进行后续重绘。如果页面元素只显示样式改变而布局不变，那么页面内容将从绘制阶段开始，即重绘。所以，需要尽可能的避免页面重排，并减少页面元素的重绘！



HTML文档解析



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <div>
      <p>页面内容</p>
    </div>
  </body>
</html>





let element = document.getElementById('id'),
    type = Object.prototype.toString.call(element).slice(8, -1);
console.log(type); // HTMLDivElement



CSS解析



html, body{
  margin: 0;
  color: red;
}
header, section, footer {
  margin-top: 10px;
}



在已经形成的DOM渲染树中，节点的CSS规则可以通过document.defaultView.getComputedStyle(element, null)方法来获取查看。

补充：样式规则的权重计算方式

样式规则
  
权重
!important
  
最高
内联
  
1000
id
  
100
.class
  
10
name
  
1
例如：



/* 100 + 10 + 1 = 111*/
body #content .btn {
  color: yellow;
}
/* 100 + 10 = 110*/
#content .btn {
  color: red;
}
/* 100 + 1 = 101 */
#content button {
  color: blue;
}

权重更高的样式规则生效，最终button按钮展示未黄色。

document.defaultView.getComputedStyle(element)获取元素CSS规则。



浏览器数据持久化存储技术

​   打开Chrome浏览器调试模式，Application左侧列举了现代浏览器的8种缓存机制HTTP文件缓存、localStorage、sessionStorage、indexDB、Web SQL、Cookie、CacheStorage、Application Cache，以及不常用的Flash缓存。



HTTP文件缓存

HTTP文件缓存是基于HTTP协议的浏览器文件级缓存技术。详情请查看： 【HTTP】缓存 


1. Cache-Control:相对时间（秒为单位）（或者，Expires:绝对时间）如果未过期，直接读取浏览器缓存文件，不发生任何HTTP请求。 

2. 在浏览器端判断上次返回头中是否包含Etag信息，有则连同If-None-Match一起向服务器端发送条件Get请求，304说明未做过修改，如果是200需要进入下一步； 

3. 在浏览器端判断上次返回头中是否包含Last-Modify信息，有则连同If-Modified-Since一起向服务器端发送条件Get请求，内容失效返回200，否则304; 

4. 如果Etag和Last-Modify都不存在，直接向服务器请求。

注意：如果返回304，不会有内容，节省请求大小！



localStorage

【受到同源策略影响】、【以及在safari下问题】、【常规解决方案代码】请查看八种方式实现跨域请求 

单个localStorage的大小受限，可以用多个iframe方式使用多个域名来突破单个页面下localStorage存储数据的最大限制。特别说明，浏览器多个标签页打开同个域名时，localStorage内容一般是共享的。其位置这可以监听事件“storage”来做一致性操作响应处理。这样会导致一种现象如下：


  
标签页一：通过某行为修改localStorage中某个属性值，然后数据接口依赖该属性值； 

  标签页二：由于localStorage标签页间共享，导致标签页二数据不准确！


sessionStorage

和localStorage功能类似，但是sessionStorage在浏览器关闭时会自动清空。



Cookie

Cookie为了辨别用户身份（参见，客户端识别与cookie机制）或Session跟踪而存储在用户浏览器端的数据。Cookie一般会通过HTTP请求发送给服务器端。 

Cookie分为：Session Cookie和持久型Cookie。Cookie设置中有个HttpOnly参数，前端浏览器使用document.cookie是读取不到HttpOnly类型的Cookie的，被设置为HttpOnly的Cookie记录只能通过HTTP请求头发送到服务器端进行读写操作，这样就避免了服务器的Cookie记录被前端javascript修改，保证了服务器验证Cookie的安全性。



其他

WebSQL：二维表的形成存储大量数据到客户端，但目前只有Chrome浏览器有。
IndexDB：在客户端存储大量结构化数据并且在这些数据上使用索引进行高性能检索的一套API，类似于NoSQL。
Application Cache：通过manifest配置文件在本地有选择性地存储javascript、css、图片等静态资源文件的文件缓存机制，已废弃。
cacheStorage：在ServiceWorker规范中定义的，用于保存每个ServiceWorker（后续博文会单独介绍）声明的Cache对象，未来可能替代Application Cache的离线方案。
Flash缓存：主要基于Flash，具有读写浏览器本地目录的功能。

  
号外：chrome://chrome-urls/可以列出Chrome的所有URL；使用安卓手机打开Chrome，在桌面Chrome中输入chrome://inspect/#devices可以连接手机进行调试。

前端跨站技术

随着前端技术栈在服务端和移动端上的尝试和日益成熟，前端工程师的追求绝不只是页面上的技术，如何实现跨服务端，如何扩展到移动端开发将变成主要讨论议题。



JavaScript跨后端实现技术

前端通过与Node（基于事件驱动和无阻塞）结合的开发模式越来越被开发者认同并在越来越多的项目中得到实现。



SPA场景下SEO的问题

SPA应用加载的基本流程：浏览器端先加载一个空页面和JavaScript脚本，然后异步请求接口获取数据，渲染页面数据内容后展示给用户。问题是：搜索引擎抓取页面解析该页面HTML中关键字、内容时JavaScript尚未调用执行，仅仅是一个空页面（body为空），影响搜索引擎收录页面的内容排行。解决方案：使用Node端数据渲染，在页面请求时将页面内容渲染到页面上输出（即，后台直出）。



前后端同构

实现核心：只开发一套项目代码，既可以用来实现前端的JavaScript加载渲染，也可以用于后台的直出渲染； 
实现原理：（1）数据模板的前端渲染和后台直出；（2）MVVM的前端实现和后台直出；（3）Virtual DOM的前端渲染和后端直出。

基于数据模板的前后端同构

将模板描述语法与数据进行拼接生成HTML代码字符串插入到页面特定的元素中来完成数据的渲染。



基于MVVM的前后端同构

页面加载完成后会开始扫描DOM结构中的Directive指令并进行DOM操作渲染或事件绑定，所以数据的显示仍然需要页面执行Directive后才能完成。



基于Virtual DOM的前后端同构

在浏览器生成前端DOM结构，或在直出层直接转换成HTML文本字符串输出。Virtual DOM的逻辑实现仍然需要在浏览器端进行事件绑定来完成，最好让同构框架帮助我们自动完成，根据HTML的结构进行特定的事件绑定处理，保证最后展示给用户的页面完整且带有交互逻辑。



对于模板前后端都需要转化成HTML文本，然后生成DOM；对于MVVM（ViewModel）或者Virtual DOM，前端直接生成DOM，后端需要转化成HTML文本，然后生成DOM。

使用前后端同构实现方案，需要注意的几个问题：

前后端构架的选择：这主要指前端使用的主要框架和后端结构渲染解析模块的选择；
模块渲染机制：关键的不同点在于HTML描述和转化方式的选择上面；
构建打包：同一套代码基于前后端场景打包完成后是不一样的，同时需要将打包后的内容输出到不同目录，便于调试；
渲染和直出区分：必须方便的选择使用前端渲染的方式还是后台直出的方式，例如在URL后面添加render参数进行区分。
跨终端设计与实现



Hybrid技术趋势

随着移动互联网的发展，Native应用快速迭代开发的需求也越来越多，但是现有Native应用的开发迭代速度依然无法满足市场快速变化的需求；伴随着H5的出现，其允许开发者在移动设备上快速开发网页端应用，进入了Native应用、Web应用和Hybrid应用并存时代。

Native应用的优点

原生系统级Native API的支持，运行速度快、性能好，可使用原生Native动画库；
可针对不同平台特性进行用户体验优化；
资源在打包安装时生成，节省用户使用时的流量。
Native应用的缺点

开发成本高，兼容性差；维护成本高，需要手动下载更新，历史版本也要维护；
上线需要应用商店审核；版本更新慢，更新时需要重新下载安装包；
应用界面的内容不可被搜索引擎检索。
Web应用的优点

跨平台和终端，基于浏览器或WebView运行，开发成本低 ；
部署简单，快捷，无需安装；迭代速度快；
内容可被搜索引擎检索。
Web应用的缺点

消息推送、动画等实现方式较差，浏览体验无法超过Native应用；
不能调用设备的原生特性，如无法访问本地资源、相机API等。
Hybrid应用的优点

集结了上述二者的优点；
可通过JSBridge调用设备的系统级API；
借助于MNV*的开发模式可以更接近Native应用的用户体验。
Hybrid应用的缺点

部分机型兼容相对Native较差，但比Web体验更好。
基于localStorage的资源离线和更新技术

ServiceWorker的资源离线与更新

ServiceWorker是替代Application Cache的机制，目前为止其兼容性很差。

localStorage资源离线缓存与更新

基本思路：将JavaScript、CSS资源文件甚至是接口返回的数据资源缓存到浏览器的localStorage中，下次打开页面时不进行JavaScript、CSS资源的请求，而是直接通过localStorage读取内容，然后插入到页面中解析执行。



<div id="versionStore" data-version="2"></div>



/**
 * localStorage方式实现增量更新
 */
let localStorage = window.localStorage,
    oldVersion = localStorage.getItem('version') || 0,  // version记录localStorage中存的版本
    newVersion = +document.querySelector('#versionStore').getAttribute('data-version');  // 当前最新版本

let content = null;
if(newVersion > oldVersion) {
    // 内容有更新或第一次加载
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(event){
        if (xhr.readyState == 4){
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                content = xhr.responseText;
                updateScript(content); // 更新脚本
                localStorage.setItem('version', newVersion); // 更新本地版本
                localStorage.setItem('a.js', content); // 更新本地内容

            }
        }
    };
    xhr.open("get", "index.js", true);
    xhr.send(null);
} else {
    // 无内容更新
    content = localStorage.getItem('a.js'); // 直接获取本地内容
    updateScript(content)
}

/**
 * 更新页面脚本
 * @param content 脚本内容
 */
function updateScript(content) {
    let script = document.createElement('script');
    script.innerHTML = content;
    document.body.appendChild(script);
    script = null;
}

页面脚本通过获取页面上的“最新版本号”和本地localStorage保存的“旧版本号”进行对比。如果本地没有版本号或者版本号较旧，则加载最新版本的静态资源文件到页面上，同时更新本地原有的localStorage缓存的内容和版本号；否则直接读取localStorage的静态资源内容到页面中解析执行。



缺点：（1）localStorage的大小限制，同域下一般是5MB；（2）用户手动清空localStorage会使离线资源失效；（3）读取localStorage的速度比较慢，尤其是移动端。

基于增量文件的更新方式

如果一个文件中只修改了少量字符，上述方式会导致整个资源文件的更新。为了节省流量我们需要增量更新。假设我们已有1.1，1.2，1.3三个版本发布，现在需要进行1.4的发布上线。为了满足增量更新，我们需要根据前面的三个版本文件内容与最新版本内容进行对比分析，分别生成三个不同版本的增量文件1.1-1.4.js，1.2-1.4.js，1.3-1.4.js，同时保留1.4版本的全量文件。



// 实现方式跟上述类似，只需修改请求地址
xhr.open("get", `${oldVersion}-${newVersion}.js`, true);



缺点：同时需要在服务器端，每次新版本发布维护多个增量文件来适应不同的旧版本更新的需要。

基于文件代码分块的增量更新机制

根据大小确定分割字符数（比如10个字符），文件字符串由几个字符串块连接组成chunk1-chunk2-chunk3-chunk4，此时需要在chunk1和chunk2之间添加data1，chunk3内容修改为chunk5，chunk4的块被删除。



[1, data1, 2, chunk5, -4]

1表示原来chunk1的内容不变，data1表示插入的新内容；-4表示删除chunk4的文件块；



let a = 1, b = 1; console.log(a, b);
// 修改为
let a = 2, b = 2; console.log(a + b);



基于编辑距离的增量更新机制

上面方式节约资源的量取决于块的大小和内容变化的块序号分布。根据编辑距离算法增量更新的方式可以真正做到字符级别的更新。它指的是从一个字符串变换到另一个字符串所需要的最少变化操作步骤。如果能计算获取两个文件对比变化时每个字符的操作步骤，就可以将操作步骤作为增量文件下载，然后在浏览器端进行代码的运算更新了。不过这种情况对于少量的字符更新很有用，如果一次更新的内容很多，生成的增量文件很可能比源文件还大，所以实际使用过程中需要结合具体情况，在上述两种增量方式中选择。



资源覆盖率统计

有了前端资源的离线和更新机制，就要考虑在每次新资源包发布后统计新版本的更新覆盖率。这对于增量更新尤为重要，如果发现某个版本的使用为0或接近0，该版本就无需在维护。方式有很多中，最简单的就是上报版本号，每次PV统计时带上版本号，最后根据PV中的版本号来统计访问不同版本上用户的分布情况。



未来前端时代

当MVVM、Virtual DOM或同构等技术实践都有很成熟高效的框架和方案可以实现时，对于移动端应用，前端可能会进入MNV*的原生NativeView开发，达到使用前端技术栈可以独立开发Native的能力；与此同时，我们需要关注物联网Web（3D展示）、Web VR（VR展示），人工智能必定成为前端一下批革命技术，把握技术发展趋势，紧跟邻域前进的步伐。

作为一个技术者，不要脱离实际项目去谈论技术！技术研究应该是在完成并希望将产品打造更好的目的上进行，切记过分追求技术！我们需要更多的产品思维，即把自己当成普通用户来对产品进行思考。高效率的开发、低成本的维护、卓越的性能、良好的扩展性将是我们不断奋斗的目标！

直播预告
前端技术实践、技术管理！

前端开发效率提升！
掌门教育前端技术，邀请业内多位前端技术专家来分享他们的最佳实践经历邀大家关注1.23号技术分享！
直播议题：
1.BFF在千寻前端的落地与演进

2.前端项目技术改造采坑心得

3.与独角兽同行——掌门教育初探

4.前端开发效率和质量管理
直播时间：
【线上 + 线下】同步举行

2021/01/23（周六） 14:00 - 17:00

线下：上海中锐虹口锐win，3楼，掌门教育大阶梯教室

10号线，海伦路/临平路，步行约5分钟
讲师简介：
唐兵，前端技术专家，千寻位置业务中台前端开发

程波，前端技术专家，掌门1对1业务系统研发部前端开发

陈一凡，掌门教育企划发展负责人

吴留坡，前端技术专家，千寻位置业务中台前端研发
观看方式：
【钉钉群观看】
欢迎钉钉扫码或钉钉搜索【掌门教育技术meetup直播间】加入！

Meetup邀请海报