Web前端技术发展简史

原文地址：博客园-格一

1、静态页面阶段

那是1990年的12月25日，恰是西方的圣诞节，Tim Berners-Lee在他的NeXT电脑上部署了第一套“主机-网站-浏览器”构成的Web系统，这标志BS架构的网站应用软件的开端，也是前端工程的开端。

1993年4月Mosaic浏览器作为第一款正式的浏览器发布。1994年11月，鼎鼎大名的Navigator浏览器发布发布了，到年底W3C在Berners-Lee的主持下成立，标志着万维网进入了标准化发展的阶段。

这个阶段的网页还非常的原始，主要以HTML为主，是纯静态的只读网页。

2、Javascript诞生及第一次浏览器战争

1995年，NetScape公司的工程师Brendan Eich设计了javascript脚本语言，并集成到了navigator2.0版本中。随后微软也意识到了javascript的潜力，并模仿开发VBScript和JScript应用到了IE中，这直接开启了NetScape和微软的浏览器竞争。

由于微软的IE集成在windows操作系统上的优势，NetScape的navigator很快在浏览器市场上落于下风。于是他们把javascript提交到了ECMA，推动制订了ECMAScript标准，成功实现了javascript的标准国际化。虽然第一次浏览器战争最后IE大胜Navigator，但是NetScape的javascript主导了W3C的官方标准。

3、动态页面的发展

Javascript的诞生之初，就给网页带来了一些跑马灯、浮动广告之类的特效和应用，让网页动了起来。但是网页真正开始向动态交互发展的开端，却是PHP、JSP和ASP为代表的后端动态页面技术的出现。

这些服务器端的动态页面技术使得网页可以获取服务器的数据信息并保持更新，推动了Google为代表的搜索引擎和各种论坛的出现，万维网开始快速发展。

服务器端网页动态交互功能的不断丰富，伴随的是后端逻辑的复杂度快速上升，代码越来越复杂。为了更好的管理后端逻辑，出现了大量后端的MVC框架。

4、Ajax的流行开启Web2.0时代

2004年前的动态页面都是由后端技术驱动的，虽然实现了动态交互和数据即时存取，但是每一次的数据交互都需要刷新一次浏览器。频繁的页面刷新非常影响用户的体验，这个问题直到谷歌在04年应用Ajax技术开发的Gmail和谷歌地图的发布，才得到了解决。

这背后的秘密就是Ajax技术中实现的异步HTTP请求，这让页面无需刷新就可以发起HTTP请求，用户也不用专门等待请求的响应，而是可以继续网页的浏览或操作。

Ajax开启了web2.0的时代。

5、前端兼容性框架的出现

NetScape在第一次浏览器之战中败给了IE之后，创办了Mozilla技术社区，该社区之后发布了遵循W3C标准的firefox浏览器，和Opera浏览器一起代表W3C阵营和IE开始了第二次浏览器战争。

不同的浏览器技术标准有不小的差异，不利于兼容开发，这催生了Dojo、Mooltools、YUIExtJS、jQuery等前端兼容框架，其中jQuery应用最为广泛。

6、HTML5出现及第二次浏览器战争

Mozilla和Opera在2004年6月提议W3C扩展HTML和DOM的Web Forms 2.0 草案被否决后，一些浏览器厂商便成立了网页超文本应用技术工作小组（WHATWG），提出了Web Applications 1.0规范草案，这两种规范后来合并成为HTML5。W3C在2007年接纳了HTML5草案规范，并成立了新的HTML工作团队，在2008年1月22日，HTML5正式草案发布。

在HTML5新规范的指引下，各个浏览器厂商都为了支持HTML5而不断改进浏览器，第二次浏览器战争走向了良性竞争。值得注意的是，谷歌以javascript引擎V8为基础研发的Chrome浏览器发展迅猛。

2014年10月28日，W3C正式发布HTML5.0推荐标准。

7、Node.js爆发

2009年，Ryan Dahl以Chrome的V8引擎为基础开发了基于事件循环的异步I/O框架-Node.js。

Node.js使得前端开发人员可以利用javascript开发服务器端程序，深受前端开发人员的欢迎。很快，大量的Node.js使用者就建构了一个用NPM包管理工具管理的Node.js生态系统。

Node.js也催生了node.webkit等项目，拓展了javascript开发跨平台的桌面软件的能力。

8、前端MVC架构及SPA时代的开启

随着各大浏览器纷纷开始支持HTML5，前端能够实现的交互功能越多，相应的代码复杂度也快速提高，以前用于后端的MVC框架也开始出现在前端部分。从2010年10月出现的Backbone开始，Knockout、Anjular、Ember、Meteor、Vue相继出现。

这些框架的运用，使得网站从Web Site进化成了Web App，开启了网站应用的SPA（Single Page Application）的时代。

9、移动Web和Hybrid App

随着智能手机的发展，移动端成了重要的信息和流量端口，为了满足不同移动端浏览器的兼容需求，发展出了jQuery Mobile、Sencha Touch、Framework7等框架。

Hybrid技术指的是利用Web开发技术，调用Native相关的API，实现移动与Web二者的有机结合，既能利用Web开发周期短的优势，又能为用户提供Native的体验。

Native App的性能和UI体验依然比移动Web App要好，但移动Web开发成本低、跨平台、发布周期短的特点不容忽视，未来可期。

10、ECMAScript6

2015年6月，ECMAScript 6.0发布，该版本增加了很多新的语法，极大的拓展了javascript的开发潜力。由于浏览器ES6语法的支持滞后，出现了Babel和TypeScript来把ES6代码编译成ES5等现有浏览器支持的代码。

ES6现已更名为ES2015，以后每年会发布新的ES标准，这标志着javascript的发展将会更快。

11、今天的前端

今天的前端技术已经形成了一个大的技术系统。
以Github为代表的代码管理仓库；NPM和Yarn为代表的包管理工具；ES6及Babel和TypeScript构成的脚本体系；HTML5；CSS3和相应的处理技术；React、Vue、Anjular为代表的框架；Webpack为代表的打包工具；Node.js为基础的Express和KOA后端框架；Hybrid技术。