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技術。