在很久以前，HTML，CSS和JavaScript - 就已經是是任何前端開發人員所涉及的主要內容。

HTML
第一次公開提到HTML是在1991年，Tim Berners-Lee描述了最初為標記語言提供的18個標籤。 1994年他成立了一個HTML工作組 - 網際網路工程任務組（IEFT）。他們認為網路屬於大眾（這個想法今天仍然很先進），所以他們的大門向任何希望加入的人開放。到1995年，我們獲得了許多新的標籤和屬性，例如能夠設定字型和背景顏色。這引起了一些爭議，因為他們認為HTML只應該用於描述文件的結構，而不是用於超出範圍的樣式。那時，瀏覽器供應商正在攻擊HTML工作組，並且對新功能的承認非常緩慢。為了解決這個問題，供應商聚集在一起致力於標準化HTML，一個月後，HTML工作組由於其緩慢性而被迫解散。

CSS
不久前，我們所有的樣式通常都侷限於單個CSS檔案。
與我們今天所知的特殊區相比，我們構建風格時沒有給予太多考慮。 Sass（Syntactically Awesome Stylesheets）於2006年問世，但直到幾年之後，像OOCSS（面向物件的CSS）這樣的方法才是真正的可擴充套件，可維護和可重用。現在我們可以使用命名方法，如BEM（塊，元素，修飾符）或SUIT CSS，但結果是瀏覽器中的舊CSS。

JAVASCRIPT
在前端開發的三個基石中，JavaScript是經歷了最徹底的轉變的。在開發僅10天之後，在1995年開了光。直到今天，你要麼愛它，要麼恨它。伺服器端JavaScript也在1995年被實現，但伺服器端JS的真正支持者是Node，它於2009年釋出。
從Node開始，貌似一切都在JavaScript上執行。構建工具正在使用它，應用程式使用它......它幾乎嵌入在開發的各個方面。隨著釋出週期的更新，JavaScript本身每年都在變得越來越強大。 每年都會有新的釋出。值得慶幸的是，這些下一個版本不會像ES2015那樣深遠，這讓我們有機會趕上它的發展浪潮。

第一次瀏覽器戰爭
1996 年 11 月，為了確保 JavaScript 的市場領導地位，網景將 JavaScript 提交到歐洲計算機制造商協會（European Computer Manufacturers Association）以便將其進行國際標準化。

1996.12 W3C 推出了 CSS 1.0 規範

1997.1 HTML3.2 作為 W3C 推薦標準釋出

1997.6 ECMA 以 JavaScript 語言為基礎制定了 ECMAScript 1.0 標準規範

1997 年 6 月，ECMA 以 JavaScript 語言為基礎制定了 ECMAScript 標準規範 ECMA-262。JavaScript 是 ECMAScript 規範最著名的實現之一，除此之外，ActionScript 和 JScript 也都是 ECMAScript 規範的實現語言。自此，瀏覽器廠商都開始逐步實現 ECMAScript 規範。

1997.12 HTML 4.0 規範釋出

1998 W3C 推出了 CSS 2.0 規範

1998.6 ECMAScript 2 規範釋出

1998 年 6 月，ECMAScript 2 規範釋出，並通過 ISO 生成了正式的國際標準 ISO/IEC 16262 。

1999.12 ECMAScript 3 規範釋出
1999 年 12 月，ECMAScript 3 規範釋出，在此後的十年間，ECMAScript 規範基本沒有發生變動。ECMAScript 3 成為當今主流瀏覽器最廣泛使用和實現的語言規範基礎。

第一次瀏覽器戰爭以 IE 瀏覽器完勝 Netscape 而結束，IE 開始統領瀏覽器市場，份額的最高峰達到 2002 年的 96%。隨著第一輪大戰的結束，瀏覽器的創新也隨之減少。

XHTML
1999 W3C 釋出 HTML 4.01 標準，同年微軟推出用於非同步資料傳輸的 ActiveX，隨即各大瀏覽器廠商模仿實現了 XMLHttpRequest（AJAX 雛形）。
2000: W3C 採用了一個大膽的計劃，把 XML 引入 HTML，XHTML1.0 作為 W3C 推薦標準釋出
2001.5 W3C 推出了 CSS 3.0 規範草案
2002-2006 XHTML 2.0 最終放棄
2009 W3C 宣佈 XHTML2.0 不再繼續，宣告死亡

動態頁面的崛起
JavaScript 誕生之後，可以用來更改前端 DOM 的樣式，實現一些類似於時鐘之類的小功能。那時候的JavaScript 僅限於此，大部分的前端介面還很簡單，顯示的都是純靜態的文字和圖片。這種靜態頁面不能讀取後臺資料庫中的資料，為了使得 Web 更加充滿活力，以 PHP、JSP、ASP.NET 為代表的動態頁面技術相繼誕生。

PHP（PHP：Hypertext Preprocessor）最初是由 Rasmus Lerdorf 在 1995 年開始開發的，現在PHP 的標準由 PHP Group 維護。PHP 是一種開源的通用計算機指令碼語言，尤其適用於網路開發並可嵌入 HTML 中使用。PHP 的語法借鑑吸收 C 語言、Java 和 Perl 等流行計算機語言的特點，易於一般程式設計師學習。PHP 的主要目標是允許網路開發人員快速編寫動態頁面。

JSP（JavaServer Pages）是由 Sun 公司倡導和許多公司參與共同建立的一種使軟體開發者可以響應客戶端請求，從而動態生成 HTML、XML 或其他格式文件的 Web 網頁的技術標準。JSP 技術是以 Java 語言為基礎的。1999 年，JSP 1.2 規範隨著 J2EE 1.2 釋出。

ASP（Active Server Pages）1.0 在 1996 年隨著 IIS 3.0 而釋出。2002 年，ASP.NET 釋出，用於替代 ASP。

隨著這些動態伺服器頁面技術的出現，頁面不再是靜止的，頁面可以獲取伺服器資料資訊並不斷更新。以 Google 為代表的搜尋引擎以及各種論壇相繼出現，使得 Web 充滿了活力。

隨著動態頁面技術的不斷髮展，後臺程式碼變得龐大臃腫，後端邏輯也越來越複雜，逐漸難以維護。此時，後端的各種 MVC 框架逐漸發展起來，以 JSP 為例，Struct、Spring 等框架層出不窮。

從 Web 誕生至 2005 年，一直處於後端重、前端輕的狀態。

AJAX 的流行
在 Web 最初發展的階段，前端頁面要想獲取後臺資訊需要重新整理整個頁面，這是很糟糕的使用者體驗。

Google 分別在 2004 年和 2005 年先後釋出了兩款重量級的 Web 產品：Gmail 和 Google Map。這兩款 Web 產品都大量使用了 AJAX 技術，不需要重新整理頁面就可以使得前端與伺服器進行網路通訊，這雖然在當今看來是理所應當的，但是在十幾年前AJAX卻是一項革命性的技術，顛覆了使用者體驗。

隨著 AJAX 的流行，越來越多的網站使用 AJAX 動態獲取資料，這使得動態網頁內容變成可能，像 Facebook 這樣的社交網路開始變得繁榮起來，前端一時間呈現出了欣欣向榮的局面。

AJAX 使得瀏覽器客戶端可以更方便地向伺服器傳送資料資訊，這促進了 Web 2.0 的發展。

第二次瀏覽器戰爭
前端相容性框架的出現
IE 在第一次瀏覽器大戰中擊敗 Netscape 贏得勝利，壟斷了瀏覽器市場。作為獨裁者，IE 並不遵循 W3C 的標準，IE 成了事實標準。

Netscape 於 1998 年被 AOL 收購前建立了 Mozilla 社群，Firefox 於 2004 年 11 月首次釋出，並且 9 個月內下載量超過 6000 萬，獲取了巨大的成功，IE 的主導地位首次受到了挑戰， Firefox 被認為是 Netscape 的精神續作。

之後 Firefox 瀏覽器一路奮起直追，逐漸蠶食 IE 市場份額，這引發了第二次瀏覽器戰爭。在 2008 年底時，Firefox 的市場份額達到了 25% 以上，IE 則跌至 65% 以下。

第二次瀏覽器戰爭中，隨著以 Firefox 和 Opera 為首的 W3C 陣營與 IE 對抗程度的加劇，瀏覽器碎片化問題越來越嚴重，不同的瀏覽器執行不同的標準，對於開發人員來說這是一個惡夢。

為了解決瀏覽器相容性問題，Dojo、jQuery、YUI、ExtJS、MooTools 等前端 Framework 相繼誕生。前端開發人員用這些 Framework 頻繁傳送 AJAX 請求到後臺，在得到資料後，再用這些 Framework 更新 DOM 樹。

其中，jQuery 獨領風騷，幾乎成了所有網站的標配。Dojo、YUI、ExtJS 等提供了很多元件，這使得開發複雜的企業級 Web 應用成為可能。

HTML 5
1999年，W3C釋出了 HTML 4.01 版本，在之後的幾年，沒有再發布更新的 Web 標準。隨著Web的迅猛發展，舊的Web標準已不能滿足 Web 應用的快速增長。

2004 年 6 月，Mozilla 基金會和 Opera 軟體公司在全球資訊網聯盟（W3C）所主辦的研討會上提出了一份聯合建議書，其中包括 Web Forms 2.0 的初步規範草案。建議舉行一次投票，以表決 W3C 是否應該擴充套件 HTML 和 DOM，從而滿足 Web 應用中的新需求。研討會最後以 8 票贊成，14 票反對否決此建議，這引起一些人的不滿，不久後，部分瀏覽器廠商宣佈成立網頁超文字技術工作小組（WHATWG），以繼續推動該規範的開發工作，該組織再度提出 Web Applications 1.0 規範草案，後來這兩種規範合併形成 HTML5。2007 年，獲得 W3C 接納，併成立了新的 HTML 工作團隊。2008 年 1 月 22 日，第一份正式草案發布。

2008.12 Chrome 釋出，JavaScript 引擎 V8
HTML5 草案發布不久，Google 在 2008 年 12 月釋出了 Chrome 瀏覽器，加入了第二次瀏覽器大戰當中。Chrome 使用了 Safari 開源的 WebKit 作為佈局引擎，並且研發了高效的 JavaScript 引擎 V8。

儘管 HTML5 在網路開發人員中非常出名了，但是它成為主流媒體的一個話題是在 2010 年的 4 月，當時蘋果公司的 CEO 喬布斯發表一篇題為“對 Flash 的思考”的文章，指出隨著 HTML5 的發展，觀看視訊或其它內容時，Adobe Flash 將不再是必須的。這引發了開發人員間的爭論，包括 HTML5 雖然提供了加強的功能，但開發人員必須考慮到不同瀏覽器對標準不同部分的支援程度的不同，以及 HTML5 和 Flash 間的功能差異。

在第二次瀏覽器大戰中，各個瀏覽器廠商都以提升 JavaScript 執行效率和支援 HTML5 各種新特性為主要目標，促進了瀏覽器的良性競爭。在這一場戰爭中，Chrome 攻城略地，搶奪 IE 市場份額。2013 年，Chrome 超過 IE，成為市場份額最高的瀏覽器。2016 年，Chrome 佔據了瀏覽器市場的半壁江山。

自 2008 年以來，瀏覽器中不斷支援的 HTML5 新特性讓開發者激動不已：WebWorker 可以讓 JavaScript 執行在多執行緒中，WebSocket 可以實現前端與後臺的雙工通訊，WebGL 可以建立 Web3D 網頁遊戲……

Node.js 的爆發

早在 1994 年，Netspace 就公佈了其 Netspace Enterprise Server 中的一種伺服器指令碼實現，叫做 LiveWire，是最早的伺服器端 JavaScript，甚至早於瀏覽器中的 JavaScript。對於這門圖靈完備的語言，Netspace 很早就開始嘗試將它用在後端。

微軟在 1996 年釋出的 IE 3.0 中內嵌了自己的 JScript語言，其相容 JavaScript 語法。1997 年年初，微軟在它的伺服器 IIS 3.0 中也包含了 JScript，這就是我們在 ASP 中能使用的指令碼語言。

1997 年，Netspace 為了用 Java 實現 JavaScript 而建立了 Rhino 專案，最終 Rhino 演變成一個基於 Java 實現的 JavaScript 引擎，由 Mozilla 維護並開源。Rhino 可以為 Java 應用程式提供指令碼能力。2006 年 12 月，J2SE 6 將 Rhino 作為 Java 預設的指令碼引擎。

SpiderMonkey 是 Mozilla 用 C/C++ 語言實現的一個 JavaScript 引擎，從 Firefox 3.5 開始作為 JavaScript 編譯引擎，並被 CouchDB 等專案作為服務端指令碼語言使用。

可以看到，JavaScript 最開始就能同時執行在前後端，但時在前後端的待遇卻不盡相同。隨著 Java、PHP、.Net 等伺服器端技術的風靡，與前端瀏覽器中的 JavaScript 越來越流行相比，服務端 JavaScript 逐漸式微。

2008 年 Chrome 釋出，其 JavaScript 引擎 V8 的高效執行引起了 Ryan Dahl 的注意。2009 年，Ryan 利用 Chrome 的 V8 引擎打造了基於事件迴圈的非同步 I/O 框架 —— Node.js 誕生。

Node.js 具有以下特點：

基於事件迴圈的非同步 I/O 框架，能夠提高 I/O 吞吐量
單執行緒執行，能夠避免了多執行緒變數同步的問題
使得 JavaScript 可以編寫後臺程式碼，前後端程式語言統一。
Node.js 的出現吸引了很多前端開發人員開始用 JavaScript 開發伺服器程式碼，其非同步程式設計風格也深受開發人員的喜愛。Node.js 的偉大不僅在於拓展了 JavaScript 在伺服器端的無限可能，更重要的是它構建了一個龐大的生態系統。

2010 年 1 月，NPM 作為 Node.js 的包管理系統首次釋出。開發人員可以按照 CommonJS 的規範編寫 Node.js 模組，然後將其釋出到 NPM 上面供其他開發人員使用。目前 NPM 具有 40 萬左右的模組，是世界上最大的包模組管理系統。

Node.js 也催生了 node-webkit 等專案，用 JavaScript 開發跨平臺的桌面軟體也成為可能。Node.js 給開發人員帶來了無窮的想象，JavaScript 大有一統天下的趨勢。

移動 Web 和 Hybrid App
隨著 iOS 和 Android 等智慧手機的廣泛使用，移動瀏覽器也逐步加強了對 HTML5 特性的支援力度。

移動瀏覽器的發展，導致了流量入口逐漸從 PC 分流到移動平臺，這是 Web 發展的新機遇。移動 Web 面臨著更大的碎片化和相容性問題，jQuery Mobile、Sencha Touch、Framework7、Ionic 等移動 Web 框架也隨之出現。

相比於 Native App，移動 Web 開發成本低、跨平臺、釋出週期短的優勢愈發明顯，但是 Native App的效能和 UI 體驗要遠勝於移動 Web。移動 Web 與 Native App 孰優孰劣的爭論愈演愈烈，在無數開發者的實踐中，人們發現兩者不是替代關係，而是應該將兩者結合起來，取長補短，Hybrid 技術逐漸得到認同。

Hybrid 技術指的是利用 Web 開發技術，呼叫 Native 相關 API，實現移動與 Web 二者的有機結合，既能體現 Web 開發週期短的優勢，又能為使用者提供 Native 體驗。

根據實現原理，Hybrid 技術可以分為兩大類：

將 HTML 5 的程式碼放到 Native App 的 WebView 控制元件中執行，WebView 為 Web 提供宿主環境，JavaScript 程式碼通過 WebView 呼叫 Native API。典型代表有 PhoneGap(Cordova) 以及國內的 AppCan 等。

將 HTML 5 程式碼針對不同平臺編譯成不同的原生應用，實現了 Web 開發，Native 部署。這一類的典型代表有 Titanium 和 NativeScript。

Hybrid 一系列技術中很難找出一種方案適應所有應用場景，我們需要根據自身需求對不同技術進行篩選與整合。

--------------------- 

部分內容轉自：https://blog.csdn.net/freekiteyu/article/details/79927047