随着互联网产业的爆炸式增长，与之伴生的Web前端技术也在历经洗礼和蜕变。尤其是近几年随着移动终端的发展，越来越多的人开始投身或转行至新领域，这更为当今的IT产业注入了新的活力。尽管Web前端技术诞生至今时日并不长，但随着Web技术的逐渐深入，今后将会在以下几方面发力。
Web移动终端开发。
JavaScript的兄弟们。
百花齐放的类库和框架。
工程化的Web前端开发规范。

Web移动终端开发

PhoneGap： 一个开源的开发框架，使用HTML、CSS和JavaScript来构建跨平台的移动应用程序。它使开发者能够利用iPhone、Android、 Palm、Symbian、BlackBerry、Windows Phone和Bada等智能手机的核心功能，包括地理定位、加速器、联系人、声音和振动等。除了在本地编译应用之外，还可以使用PhoneGap提供的云 端Build工具进行应用编译。也就是说，只需要将用HTML5写好的应用上传到PhoneGap的云端服务器，PhoneGap
 Build即可将其编译成适合不同平台的应用。

Sencha Touch：说到这里，就不得不提一些面向移动端的WebUI库，毕竟PhoneGap是一个工具，要想基于Web技术构建完整的App，必须选择一些适 用的移动UI库。而最值得一提的是Sencha Touch，它可以让Web App看起来像Native App。美丽的用户界面组件和丰富的数据管理，全部基于最新的HTML5和CSS3的Web标准，全面兼容Android和iOS设备。PhoneGap 昭示着一种开发趋势，即App也可以使用Web前端技术来完成。而作为开发者最常用的UI工具箱，Sencha
 Touch又进一步加速了这种趋势，目前在淘宝已有大量的项目采用这种思路来搭建，即在内置应用的外壳加上自定义的基于移动Web的UI库。相信在未来这 种模式必会越来越流行。

Media Queries：在CSS2时代，如果你曾经为网站设计过打印版CSS，那么就会明白CSS3 Media Queries的作用。不过，CSS3的Media Queries比CSS2的Media Type更实用，因为CSS2 的Media Type并不曾被多少设备支持过。CSS3的Media Queries可以获取这些数据：浏览器窗口的宽和高、设备的宽和高、设备的手持方向（横向还是竖向）和分辨率等。也就是说，Media Queries提供了一种基于不同的平台写CSS的技术。这项技术在2011年初被推广开来，至今已非常火热，尤其是在Web页面仍占互联网流量大多数的
 今天，这种兼容技术能很快让网站兼容移动设备，保证产品实现最快的跨平台的兼容性和多平台的可用性。

Zepto.js：一个专为 Mobile WebKit浏览器（如Safari和Chrome）而开发的JavaScript框架。它标榜自己简约的开发理念能够帮助开发人员简单、快速地完成开发 交付任务。更重要的是这个JavaScript框架是超轻量级的，只有5KB。Zepto.js的语法借鉴且兼容jQuery。目前已有不少网站开始基于 Zepto.js做应用，因为在抛弃了IE浏览器的兼容性问题后，Web开发会变得越来越纯粹，体积更轻巧，编码也更加愉悦。不可否认，随着移动终端开发
 越来越流行，Zepto.js在未来将会有更加广阔的应用场景和空间。

Bootstrap：Twitter推出的一个开源的用于前端开发的工具包。它由Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，由动态CSS语言LESS写成，与CSS 框架Blueprint存在很多相似之处。Bootstrap一经推出便颇受欢迎，一直是GitHub上的热门开源项目，NASA和MSNBC的 Breaking News都使用了该项目。2012年第二季度，Bootstrap发布了2.0版，Bootstrap
 2.0的一个重大改进是添加了响应设计特性，在1.0中，这是让很多开发人员抱怨的地方。而且为了提供更好的针对移动设备的响应式设计方 案，Bootstrap 2.0采用了更为灵活的12栏网格布局。此外，它还更新了一些进度栏及可定制的图片缩略图，并增加了一些新样式。值得关注的是，Bootstrap是一个 非常轻量级的框架，2.0在压缩后只有10KB。Bootstrap为我们的网站快速搭建提供了不错的工具和思路，这个工具集将拥有更旺盛的生命力。

JavaScript的兄弟们

CoffeeScript 是一个借鉴Ruby编写的新编程语言，创建者Jeremy Ashkenas戏称它是JavaScript的低调的小兄弟，因为CoffeeScript会将Ruby编译成JavaScript，而且大部分结构都 相似。但不同的是，CoffeeScript拥有更严格的语法。它的最大功绩就是将JavaScript硬绑的C/Java语法抛弃了，改为采用类似 Ruby/Python的语法。Ruby/Python本来就是深受Lisp影响的，与JavaScript算是同门师兄，它们的语法经过了实践考验，非
 常适合函数式编程。这种优雅的语言独具魅力，即将面世的2013版的淘宝首页即采用了CoffeeScript实现。

TypeScript 是微软开发的JavaScript的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。与 JavaScript相比，TypeScript进步的地方在于：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个 完整的类结构，使之更像是传统的面向对象语言。由于JavaScript只是一个脚本语言，并非用于开发大型Web应用，所以没有提供类和模块的概念。而 TypeScript扩展了JavaScript实现了这些特性，能更好地支持大规模JavaScript应用开发，吸引了不开发者。但要注意，虽然
 TypeScript有微软做后盾看起来很有保证，但目前提供的只是早期的预览版本，TypeScript并不像它的网站看起来那样精美，最终版本可能会 在一年后ECMAScript 6发布会确定，现在的版本只是个开发预览版。因此，TypeScript今后发展如何，还需要进一步观察。

此外，在服务器端，Node.js越来越流行。如今Node.js不仅作为处理高并发请求的中间层解决方案，还因其灵活的语法和丰富的底层API，越来越多 的人开始用它来写工具，尤其是之前基于Ant或者Java的一些工具如今都有了Node.js的版本。

如此看来，Node.js在命令行工具领域有着更加 广阔的应用场景，甚至可以代替Perl或者Ruby这些传统的动态语言。在淘宝Node.js已有非常多的应用场景，例如在数据部门，Node.js被用 作处理高并发场景下的容池，专门吸收高并发的请求，甚至能够保持和客户端的长链接，而这在之前则需要花费很高昂的成本，例如Comet技术等。此外，淘宝 的开源前端类库KISSY也可以直接运行于Node.js环境，这样就可以在命令行运行KISSY代码，很多前端代码就有机会采用自动化测试等，提高生产 效率。再者，淘宝内部的开发工具链也已大部分采用Node.js来构建了。

百花齐放的类库和框架

SeaJS是由支付宝前端高级技术专家王保平（玉伯）开发的一个遵循CMD规范的模块加载框架，可用来轻松愉悦地加载任意JavaScript模块和CSS模块。 SeaJS非常小巧，小巧在于其压缩后体积只有4KB，而且接口和方法也非常少。SeaJS有两个核心：模块的定义和模块的加载。SeaJS可以加载任意 JavaScript模块和CSS模块，能保证你在使用一个模块时，已将所依赖的其他模块载入脚本运行环境中。SeaJS可以让你享受写代码的乐趣，不用 去管那些加载的问题。毕竟现在网页的可维护性和性能问题一样严峻，体现在：文件太多，不利于维护，前端后端都一样；HTTP请求过多，当然这个可以通过合
 并解决，但如果没有后端直接合并，那么人工成本会非常大。用SeaJS就能非常好地解决这些问题。SeaJS遵循CMD规范，因此可以很方便地书写模块。 目前已经有越来越多的人采用CMD规范来开发项目了。

最近微软已经正式发布了Windows 8操作系统，Windows操作系统的风格已经完全变成了磁贴状的Metro UI。对于微软来说，这是一个巨大的改变，而且所有微软的平台包括桌面、平板、移动端及其网站都使用这个UI风格。Metro UI CSS是一个非常完整的创建Metro风格的网站框架。它自成体系，但也可以与其他框架一起使用。使用LESS创建，并且拥有网格系统、排版样式、表格、 按钮和图片。同时也拥有内建的JavaScript组件，帮助你生成片状、菜单、边栏、进度条和提示等，是一个非常好用的框架。随着Windows
 8的进一步流行，这种风格的CSS类库一定会成为一种趋势。

Hype是一个小巧的工具，是Mac App Store新上架的一个HTML5创作工具，其长处是可以在网页上做出悦目的动画效果，无须Flash插件。开发该应用的公司Tumult由两个前苹果工 程师创建，并获得了Y Combinator的投资。由于公司的联合创始人之一Jonathan Deutsch曾担任Mail.app后端的技术主管，因此他在接受Paul Hontz的The Startup Foundry访谈时，谈到公司创始是为了解决HTML5创作工具缺乏的问题。可以说，Hype是第一个可用的创作HTML5产品的可视化工具，具有里程
 碑式的意义。随着硬件性能提升，HTML5的应用程序更加倾向于被工具生成，而不像传统意义上由工程师“切”出来。因此工具化是一个方向，不管HTML5 是否真的能在移动终端扎下脚跟，这种方向是值得坚持的。毕竟，HTML5的应用开发现在还处于原始社会。

iScroll.js是使用原生 JavaScript编写的一个模拟滚动效果的小类库，不依赖于任何JavaScript框架。旨在解决移动WebKit系浏览器的区域滚动问题，兼容 Mobile Safari、Android默认浏览器、Safari、Chrome、Firefox5+、Opera11+、IE9+及其他WebKit核心浏览器。 最新版本为iScroll4。这个小库一问世就备受关注，因为它不仅可以在PC端完美模拟滚动效果，在移动终端里对触屏事件的支持也堪称完美。

iScroll4 是2011年底问世的，2012年在移动终端产品开发中大放异彩，在淘宝的诸多产品中都用到了这个JavaScript库。iScroll是小而精的经典 作品，名字也带着苹果范儿。但美中不足的是，只能使用ID调用。不过这个小特性不是什么大问题，可以通过二次封装来解决。期待iScroll4在移动终端 里有更多精彩的表现。

前端MVC在2011年是比较火的话题，随着越来越多的人开始尝试使用诸如JavaScript MVC和Backbone.js这些MVC类库，更多的产品也看起来更像“软件”而非“网页”。但由于前端环境的复杂性，我们也渐渐发现“这种”MVC并 非完美，只能应用于“基于数据驱动”的场景，而对“基于事件驱动”的场景却没有太好的解决办法。目前，淘宝有很多产品在尝试使用“有限自动机”来弥补 MVC在这方面的不足。因此，新场景下的MVC还需要更深入的提炼。

工程化的Web前端开发规范

2012 年，关于前端开发编码规范的讨论愈来愈多。国外和国内的顶尖开发者几乎同时对编码规范产生了很大兴趣，前Yahoo!首页首席前端工程师N.C. Zakas在他那本《高可维护的JavaScript》书中也提到规范在团队协作过程中的重要性。而如下这两个方面，是值得我们探讨和深思的。

AMD 与CMD规范之争，随着CommonJS的进一步普及，CommonJS规范在标准的模块开发领域发挥着越来越重要的作用，而CommonJS在浏览器端 的难以实现却为这份规范增添了一丝变数。本质上讲，CommonJS是一种用于同步加载JavaScript代码的API规范，非常简单优雅。为了在浏览器端实现这种机制，则不得不加入了一层异步回调，这便是AMD（Modules/Asynchronous-Definition）。RequireJS 实现了这个规范，而Dojo也将马上完全支持（Dojo1.6）。规范本身非常简单，甚至只包含了一个API。玉伯在开发SeaJS的过程中，更多地保持
 了CommonJS Modules规范的风格，即CMD（Common Module Definition）。较之AMD，CMD没有采用单一的API来适用于多个功能，而是根据不同功能定义不同的API。我认为，两者在完备性上是基本一 致的，但在社区理念和编程风格上有所差异，开发者可以根据自己的偏好来选择使用AMD还是CMD编程风格。

Java语言编码 规范对于前端开发编程规范有非常大的影响。在Zakas的《高可维护性JavaScript》一书中提到了五种JavaScript编程规范，都和 Java语言编码规范有着类似的渊源：Crockford编程规范、 jQuery核心风格指南、SproutCore编程风格指南、Google的JavaScript风格指南和Dojo编程风格指南。不管是哪种规范，都 强调了编码风格一致的重要性，这也可看出，前端团队开发越来越看重规范，JavaScript的灵活性需要某种程度的限制。

总之，通过上面的阐述，我们可以看到前端技术的不断进步和推陈出新，也能够体会到项目过程的工程化，解决方案的轻量化，库和框架的多元化，知识结构的体系化，这种趋势在今后会变得越来越明显，也昭示着前端技术的发展方向。

说 到前端技术知识结构的体系化建设，这是我这些年来一直都在做的事情，在2011年也画了一张图来说明我的观点——前端技术体系的建设是一项长期的任务。毕 竟前端新技术新知识层出不穷，对于经典的知识结构的整理也很有挑战性，但这项工作终究需要有人去做，为新入道的人指出一个大致的方向。对于前端工程师的成 长问题，我也写过一篇长文“前端开发十日谈”，帮助新人们解惑。

非常感谢朴灵，已经将这个知识结构新建了一个开源项目（http://github.com/JacksonTian/fks），也希望大家一起参与进来，为前端技术知识体系建设做出贡献。

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


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

​   《现代前端技术解析》提及了作为一个前端工程师需要了解的大部分技能。介绍了从直接性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可以连接手机进行调试。

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

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

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

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

同学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——京东。课程将各种复杂功能与知识点完美融合，从技术原理到开发上线，让你真实感受到一个明星产品开发的全过程。功能实现之外，还有一流用户体验和优秀交互设计等你一探究竟，拓宽开发眼界。

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

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

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

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

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

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

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

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

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

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

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

Meetup邀请海报