Web前端技术发展简史

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、前端MV*架构及SPA时代的开启
随着各⼤浏览器纷纷开始⽀持HTML5，前端能够实现的交互功能越多，相应的代码复杂度也快速提⾼，以前⽤于后端的MV*框架也开始出现在前端部分。

从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技术。