一. 上古時代：(1990-2004)
這個時期，瀏覽器的開發者，以后台開發人員居多，大部分前后端開發是一體的，大致開發流程是：后端收到瀏覽器的請求 ---> 發送靜態頁面 ---> 發送到瀏覽器。即使是有專門的前端開發，也只是用 HTML 寫寫頁面模板、CSS 給頁面排個好看點的版式（要不是我堂堂程序員看不上這點活，你們這些個切圖仔就得要飯去~）
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框架。
二. 小前端時代：(2004-2008)
不管怎么說，前端開發也算是能寫點邏輯代碼了，不再是只能畫畫頁面的低端開發了。隨着AJax 的流行，前端開發從 web1.0邁向了web2.0，前端從純內容的靜態展示，發展到了動態網頁，富交互，前端數據處理的新時期。
由於動態交互、數據交互的需求增多，還衍生出了jQuery（2006） 這樣優秀的跨瀏覽器的 js 工具庫，主要用於 DOM 操作，數據交互。有些古老的項目，甚至近幾年開發的大型項目現在還在使用 jQuery，以至於 jQuery 庫現在還在更新，雖然體量上已經遠遠不及 React、Vue 這些優秀的前端庫。
4、Ajax的流行開啟Web2.0時代
2004年前的動態頁面都是由后端技術驅動的，雖然實現了動態交互和數據即時存取，但是每一次的數據交互都需要刷新一次瀏覽器。頻繁的頁面刷新非常影響用戶的體驗，這個問題直到谷歌在2004年應用Ajax技術開發的Gmail和谷歌地圖的發布，1998年 出現的AJax 才得到了重視，流行了起來。
這背后的秘密就是Ajax技術中實現的異步HTTP請求，這讓頁面無需刷新就可以發起HTTP請求，用戶也不用專門等待請求的響應，而是可以繼續網頁的瀏覽或操作。
Ajax開啟了web2.0的時代。
三. 大前端時代：(2008-2015)
自 2004 以后，前端發展渡過了一段比較平穩的時期，各大瀏覽器廠商除了按部就班的更新自己的瀏覽器產品之外，沒有再作妖搞點其他事情。但是我們程序員們耐不住寂寞啊，工業化推動了信息化的快速到來，瀏覽器呈現的數據量越來越大，網頁動態交互的需求越來越多，JavaScript 通過操作 DOM 的弊端和瓶頸越來越明顯（頻繁的交互操作，導致頁面會很卡頓），僅僅從代碼層面去提升頁面性能，變得越來越難。於是優秀的大佬們又干了點驚天動地的小事兒：
- 2008 年，谷歌 V8 引擎發布，終結微軟 IE 時代。
- 2009 年 AngularJS 誕生、Node誕生使得前端人員也能開發服務器端程序。
- 2011 年 ReactJS 誕生。
- 2014 年 VueJS 誕生。
- 2015年6月，ECMAScript 6.0，現已更名ES2015
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、MVVM架構及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的發展將會更快。
四. 全能前端時代：(2015-2020)
隨着網速越來越快，硬件性能越來越好，js 在各個終端的運行能力與 native 開發（IOS、Android）的差距越來越小，就讓我們搞事兒（喜歡偷懶）的程序員們想着能不能寫一套代碼，然后四處運行呢。
能的，這個可以有，React-Native，小程序，以至於后來出現的 Electron，使得用 JavaScript 開發桌面應用都成為了可能（VSCode）。谷歌近兩年也推出了 Flutter 的開發語言，可以實現一套代碼，多處運行（web、app）。前端真的不再是只能切圖，開發靜態頁面的前端。后端可以搞、爬蟲可以搞（node），app 可以寫（Weex、RN、Flutter），桌面應用可以開發（Electron）,算法和語言的嚴謹性還有點短板，但是 TypeScript 的出現，以及后續 ECMA 標准的近一步完善，會使得前端更加的全能化，也可能會出現更多的細分工作領域。
11、今天的前端
今天的前端技術已經形成了一個大的技術系統。
以Github為代表的代碼管理倉庫；NPM和Yarn為代表的包管理工具；ES6及Babel和TypeScript構成的腳本體系；HTML5；CSS3和相應的處理技術；React、Vue、Anjular為代表的框架；Webpack為代表的打包工具；Node.js為基礎的Express和KOA后端框架；Hybrid技術。