1、靜態(tài)頁(yè)面階段

那是1990年的12月25日，恰是西方的圣誕節(jié)，Tim Berners-Lee在他的NeXT電腦上部署了第一套“主機(jī)-網(wǎng)站-瀏覽器”構(gòu)成的Web系統(tǒng)，這標(biāo)志BS架構(gòu)的網(wǎng)站應(yīng)用軟件的開(kāi)端，也是前端工程的開(kāi)端。

1993年4月Mosaic瀏覽器作為第一款正式的瀏覽器發(fā)布。1994年11月，鼎鼎大名的Navigator瀏覽器發(fā)布發(fā)布了，到年底W3C在Berners-Lee的主持下成立，標(biāo)志著萬(wàn)維網(wǎng)進(jìn)入了標(biāo)準(zhǔn)化發(fā)展的階段。

這個(gè)階段的網(wǎng)頁(yè)還非常的原始，主要以HTML為主，是純靜態(tài)的只讀網(wǎng)頁(yè)。

2、Javascript誕生及第一次瀏覽器戰(zhàn)爭(zhēng)

1995年，NetScape公司的工程師Brendan Eich設(shè)計(jì)了javascript腳本語(yǔ)言，并集成到了navigator2.0版本中。隨后微軟也意識(shí)到了javascript的潛力，并模仿開(kāi)發(fā)VBScript和JScript應(yīng)用到了IE中，這直接開(kāi)啟了NetScape和微軟的瀏覽器競(jìng)爭(zhēng)。

由于微軟的IE集成在windows操作系統(tǒng)上的優(yōu)勢(shì)，NetScape的navigator很快在瀏覽器市場(chǎng)上落于下風(fēng)。于是他們把javascript提交到了ECMA，推動(dòng)制訂了ECMAScript標(biāo)準(zhǔn)，成功實(shí)現(xiàn)了javascript的標(biāo)準(zhǔn)國(guó)際化。雖然第一次瀏覽器戰(zhàn)爭(zhēng)最后IE大勝Navigator，但是NetScape的javascript主導(dǎo)了W3C的官方標(biāo)準(zhǔn)。

3、動(dòng)態(tài)頁(yè)面的發(fā)展

Javascript的誕生之初，就給網(wǎng)頁(yè)帶來(lái)了一些跑馬燈、浮動(dòng)廣告之類(lèi)的特效和應(yīng)用，讓網(wǎng)頁(yè)動(dòng)了起來(lái)。但是網(wǎng)頁(yè)真正開(kāi)始向動(dòng)態(tài)交互發(fā)展的開(kāi)端，卻是PHP、JSP和ASP為代表的后端動(dòng)態(tài)頁(yè)面技術(shù)的出現(xiàn)。

這些服務(wù)器端的動(dòng)態(tài)頁(yè)面技術(shù)使得網(wǎng)頁(yè)可以獲取服務(wù)器的數(shù)據(jù)信息并保持更新，推動(dòng)了Google為代表的搜索引擎和各種論壇的出現(xiàn)，萬(wàn)維網(wǎng)開(kāi)始快速發(fā)展。

服務(wù)器端網(wǎng)頁(yè)動(dòng)態(tài)交互功能的不斷豐富，伴隨的是后端邏輯的復(fù)雜度快速上升，代碼越來(lái)越復(fù)雜。為了更好的管理后端邏輯，出現(xiàn)了大量后端的MVC框架。

4、Ajax的流行開(kāi)啟Web2.0時(shí)代

2004年前的動(dòng)態(tài)頁(yè)面都是由后端技術(shù)驅(qū)動(dòng)的，雖然實(shí)現(xiàn)了動(dòng)態(tài)交互和數(shù)據(jù)即時(shí)存取，但是每一次的數(shù)據(jù)交互都需要刷新一次瀏覽器。頻繁的頁(yè)面刷新非常影響用戶(hù)的體驗(yàn)，這個(gè)問(wèn)題直到谷歌在04年應(yīng)用Ajax技術(shù)開(kāi)發(fā)的Gmail和谷歌地圖的發(fā)布，才得到了解決。

這背后的秘密就是Ajax技術(shù)中實(shí)現(xiàn)的異步HTTP請(qǐng)求，這讓頁(yè)面無(wú)需刷新就可以發(fā)起HTTP請(qǐng)求，用戶(hù)也不用專(zhuān)門(mén)等待請(qǐng)求的響應(yīng)，而是可以繼續(xù)網(wǎng)頁(yè)的瀏覽或操作。

Ajax開(kāi)啟了web2.0的時(shí)代。

5、前端兼容性框架的出現(xiàn)

NetScape在第一次瀏覽器之戰(zhàn)中敗給了IE之后，創(chuàng)辦了Mozilla技術(shù)社區(qū)，該社區(qū)之后發(fā)布了遵循W3C標(biāo)準(zhǔn)的firefox瀏覽器，和Opera瀏覽器一起代表W3C陣營(yíng)和IE開(kāi)始了第二次瀏覽器戰(zhàn)爭(zhēng)。

不同的瀏覽器技術(shù)標(biāo)準(zhǔn)有不小的差異，不利于兼容開(kāi)發(fā)，這催生了Dojo、Mooltools、YUIExtJS、jQuery等前端兼容框架，其中jQuery應(yīng)用最為廣泛。

6、HTML5出現(xiàn)及第二次瀏覽器戰(zhàn)爭(zhēng)

Mozilla和Opera在2004年6月提議W3C擴(kuò)展HTML和DOM的Web Forms 2.0 草案被否決后，一些瀏覽器廠商便成立了網(wǎng)頁(yè)超文本應(yīng)用技術(shù)工作小組（WHATWG），提出了Web Applications 1.0規(guī)范草案，這兩種規(guī)范后來(lái)合并成為HTML5。W3C在2007年接納了HTML5草案規(guī)范，并成立了新的HTML工作團(tuán)隊(duì)，在2008年1月22日，HTML5正式草案發(fā)布。

在HTML5新規(guī)范的指引下，各個(gè)瀏覽器廠商都為了支持HTML5而不斷改進(jìn)瀏覽器，第二次瀏覽器戰(zhàn)爭(zhēng)走向了良性競(jìng)爭(zhēng)。值得注意的是，谷歌以javascript引擎V8為基礎(chǔ)研發(fā)的Chrome瀏覽器發(fā)展迅猛。

2014年10月28日，W3C正式發(fā)布HTML5.0推薦標(biāo)準(zhǔn)。

7、Node.js爆發(fā)

2009年，Ryan Dahl以Chrome的V8引擎為基礎(chǔ)開(kāi)發(fā)了基于事件循環(huán)的異步I/O框架-Node.js。

Node.js使得前端開(kāi)發(fā)人員可以利用javascript開(kāi)發(fā)服務(wù)器端程序，深受前端開(kāi)發(fā)人員的歡迎。很快，大量的Node.js使用者就建構(gòu)了一個(gè)用NPM包管理工具管理的Node.js生態(tài)系統(tǒng)。

Node.js也催生了node.webkit等項(xiàng)目，拓展了javascript開(kāi)發(fā)跨平臺(tái)的桌面軟件的能力。

8、前端MV*架構(gòu)及SPA時(shí)代的開(kāi)啟

隨著各大瀏覽器紛紛開(kāi)始支持HTML5，前端能夠?qū)崿F(xiàn)的交互功能越多，相應(yīng)的代碼復(fù)雜度也快速提高，以前用于后端的MV*框架也開(kāi)始出現(xiàn)在前端部分。從2010年10月出現(xiàn)的Backbone開(kāi)始，Knockout、Anjular、Ember、Meteor、Vue相繼出現(xiàn)。

這些框架的運(yùn)用，使得網(wǎng)站從Web Site進(jìn)化成了Web App，開(kāi)啟了網(wǎng)站應(yīng)用的SPA（Single Page Application）的時(shí)代。

9、移動(dòng)Web和Hybrid App

隨著智能手機(jī)的發(fā)展，移動(dòng)端成了重要的信息和流量端口，為了滿(mǎn)足不同移動(dòng)端瀏覽器的兼容需求，發(fā)展出了jQuery Mobile、Sencha Touch、Framework7等框架。

Hybrid技術(shù)指的是利用Web開(kāi)發(fā)技術(shù)，調(diào)用Native相關(guān)的API，實(shí)現(xiàn)移動(dòng)與Web二者的有機(jī)結(jié)合，既能利用Web開(kāi)發(fā)周期短的優(yōu)勢(shì)，又能為用戶(hù)提供Native的體驗(yàn)。

Native App的性能和UI體驗(yàn)依然比移動(dòng)Web App要好，但移動(dòng)Web開(kāi)發(fā)成本低、跨平臺(tái)、發(fā)布周期短的特點(diǎn)不容忽視，未來(lái)可期。

10、ECMAScript6

2015年6月，ECMAScript 6.0發(fā)布，該版本增加了很多新的語(yǔ)法，極大的拓展了javascript的開(kāi)發(fā)潛力。由于瀏覽器ES6語(yǔ)法的支持滯后，出現(xiàn)了Babel和TypeScript來(lái)把ES6代碼編譯成ES5等現(xiàn)有瀏覽器支持的代碼。

ES6現(xiàn)已更名為ES2015，以后每年會(huì)發(fā)布新的ES標(biāo)準(zhǔn)，這標(biāo)志著javascript的發(fā)展將會(huì)更快。

11、今天的前端

今天的前端技術(shù)已經(jīng)形成了一個(gè)大的技術(shù)系統(tǒng)。
以Github為代表的代碼管理倉(cāng)庫(kù)；NPM和Yarn為代表的包管理工具；ES6及Babel和TypeScript構(gòu)成的腳本體系；HTML5；CSS3和相應(yīng)的處理技術(shù)；React、Vue、Anjular為代表的框架；Webpack為代表的打包工具；Node.js為基礎(chǔ)的Express和KOA后端框架；Hybrid技術(shù)。