chapter1.1、前端技術發展
HTML
（Hyper Text Markup Language）超文字標記語言
描述的內容超出文字的範疇，可以描述文字的顏色，字型，大小等資訊，或者使用圖片，視訊，音訊等非文字內容。
HTML 由一個個標籤組成，各負責不同的任務。
- HTML 標籤是由尖括號包圍的關鍵詞，比如 <html>
- HTML 標籤通常是成對出現的，比如 <b> 和 </b>
- 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
- 開始和結束標籤也被稱為開放標籤和閉合標籤
<html> <body> <h1>標題</h1> <p>這是段落。</p> </body> </html>
標籤中的內容是描述的，不會顯示，<h1> </h1>中的內容是網頁的標題，<body> </body> 中的內容是網頁中顯示的內容。
可以在 https://developer.mozilla.org/zh-CN/docs/Web/HTML 中進行學習
超文字的誕生就是為了解決純文字不能格式顯示的問題，但只有通過網路才能分享，以制定了HTTP協議。
瀏覽器
歷史
1980年代，Tim Berners-Lee為CERN（歐洲核子研究中心，當時歐洲最大的網際網路節點）設計基於超文字思想的ENQUIRE專案，以促進科研人員之間的資訊共享和更新。1989年他編寫了《資訊化管理：建議》一文，並構建基於Internet的Hypertext系統，並在CERN開發了World Wide Web專案，打造了世界上第一個網站，於1991年8月6日正式上線。
Tim Berners-Lee於1990年發明了第一個瀏覽器，還發明瞭HTTP協議。
1994年MIT他建立了W3C。W3C全球資訊網聯盟，負責全球資訊網持續發展。他提出W3C的標準應該基於無專利權、無版稅.
Marc Andreessen於1993年發明了Mosaic瀏覽器，看到了這個技術的前景，不久後他成立自己的公司——網景Netscape。1994釋出了Netscape Navigator瀏覽器，席捲全球。
1995年微軟釋出IE，開啟第一次瀏覽器大戰，最終後來居上。
由於IE的捆綁銷售行為，網景的單一瀏覽器市場萎縮，從1990年代的90%下降至2006年的1%。
1999年網景被AOL收購，收購後不久，Netscape公開了瀏覽器程式碼，並建立了Mozilla組織。Mozilla組織使用Gecko引擎重寫瀏覽器。
Mozilla組織使用Gecko引擎釋出了幾款瀏覽器，最終於2004年更名為Firefox瀏覽器。
2003年5月，網景被解散。
AOL於2007年12月宣佈停止支援Netscape瀏覽器。
Apple的Safari於2003釋出第一個測試版。
2008年Google的Chrome瀏覽器帶著 V8 引擎橫空出世。
網景公司的技術:
HTTP Cookie，解決HTTP無狀態
JavaScript
SSL協議
JAR格式檔案，將Java的class檔案打包壓縮，並加上簽名
2012年4月9日，微軟以10億5千6百萬美元購買800項美國線上的專利或專利授權，專家們認為網景的SSL、Cookie等專利可能是微軟願意出高價的理由之一【摘自wiki百科】
瀏覽器技術
瀏覽器是一種特殊的客戶端，能夠基於HTTP(s)、FTP等協議和WEB伺服器進行互動，呈現網頁內容的軟體。
可以簡單的認為瀏覽器軟體分為2個部分：
- 外殼
- 外殼提供使用者互動的介面
- 核心(引擎Engine)
- 提供HTML、CSS、影象的渲染引擎，提供DOM程式設計介面
- 提供JavaScript引擎
- 提供瀏覽器內建物件
| 排版（渲染）引擎 | 瀏覽器 | 說明 |
| Gecko | Firefox | C++最早開源，可以支援複雜的網頁效果，提供強大的瀏覽器介面 |
| Trident | IE、AOL | 早期未按照W3C標準實現，相容性很差，IE9之後核心升級以符合標 |
| KHTML | KDE，於1998年開發 | |
| Presto | Opera | 目前公認的網頁瀏覽速度最快的核心，犧牲相容性 |
| WebKit | Safari、Chrome | WebKit基於KHTML開發，網頁瀏覽速度較快，但是容錯性不高 |
| Blink | Chromosome、Opera | 基於WebKit Webcore |
國內的瀏覽器一般採用了以上一個或兩個核心加上外殼實現。
JS引擎
不同瀏覽器核心中也使用不同的JS引擎，常見的JS引擎有JScript、TraceMonkey（Firefox）、V8等。
這些引擎差異不小，實現ECMA標準不同，甚至有不按照標準實現的。
使用jQuery等框架來解決相容性問題，抹平平臺差異。
JavaScript
JS
avascript 簡稱JS，是一種動態的弱型別指令碼解釋性語言，和HTML、CSS並稱三大WEB核心技術，得到了幾乎主流瀏覽器支援。
1994年，網景Netscape公司成立併發布了Netscape Navigator瀏覽器，佔據了很大的市場份額，網景意識到WEB需要動態，需要一種技術來實現。
1995年9月網景瀏覽器2釋出測試版本釋出了LiveScript，隨即在12月的測試版就更名為JavaScript。同時期，微軟推出IE並支援JScript、VBScript，與之抗衡。
1997年，網景、微軟、SUN、Borland公司和其他組織在ECMA確定了ECMAScript語言標準。JS就成為ECMAScript標準的實現之一。
ES
ES，ECMAScript是由ECMA國際（前身為歐洲計算機制造商協會,英文名稱是European Computer Manufacturers Association）通過ECMA-262標準化的指令碼程式設計語言。該語言被廣泛的應用於網際網路。
JavaScript是商品名，目前商標權在Oracle公司手中。ES是標準名。
根據ES標準，有很多實現引擎，其中包括JavaScript、JScript等，它們都是ECMA-262標準的實現和擴充套件。
為什麼之前瀏覽器相容是個大問題？
HTML、CSS、JS技術都在發展，標準版本很多。瀏覽器內嵌的引擎實現不太一致，甚至有不按照標準實現，或減少實現，或改變實現，或增加功能的實現，比如IE，這就導致了開發人員負擔，很難做到一套程式碼可以相容地跑在多種瀏覽器中，甚至都不能跑在同一種瀏覽器的不同版本中。
1997年，制定首個版本ECMA-262。
1999年12月，ES 3，支援更強大的正則表示式等。
ES4太激進，最終放棄。
2009年，ES5釋出，得到廣泛支援。支援嚴格模式，支援Json。
2015年，ES6釋出，引入非常多的新的語言特性，還相容舊版本特性。ES6之前按照版本號命名，從ES6開始使用年份作為版本號，ES6即ECMAScript 2015。
V8引擎
就在瀏覽器市場一家獨大的時候，Firefox、chrome異軍突起。
2008年9月2日，Google的chrome瀏覽器釋出，一併釋出的Js引擎，就是V8引擎。V8使用BSD協議開源。
V8引擎使用 C++ 開發，將JavaScript編譯成了機器碼，而不是位元組碼，還用很多優化方法提高效能，因此，V8引擎速度非常快。
V8引擎還可以獨立執行，可以嵌入到其他任何C++程式中。
V8引擎的誕生，使得伺服器端執行JS成為了可能且方便的事情。
2009年，基於V8引擎，誕生了Nodejs，這是伺服器端執行JS的執行環境。
CSS（Cascading Style Sheets）層疊樣式表
HTML本身為了格式化顯示文字，但是當網頁呈現大家面前的時候，需求HTML提供更多樣式能力。這使得HTML變得越來越臃腫。這促使了CSS的誕生。
1994年，W3C成立，CSS設計小組所有成員加入W3C，並努力研發CSS的標準，微軟最終加入。
1996年12月釋出CSS 1.0。
1998年5月釋出CSS 2.0。
CSS 3採用了模組化思想，每個模組都在CSS 2基礎上分別增強功能。所以，這些模組是陸續釋出的。
不同廠家的瀏覽器使用的引擎，對CSS的支援不一樣，導致網頁佈局、樣式在不同瀏覽器不一樣。因此，想要保證不同使用者使用不同瀏覽器看到的網頁效果一直非常困難。
動態網頁技術
JS的引入使得瀏覽器可以顯示動態的效果，但這不是動態網頁。
發明WEB技術的初衷是為了分享文件，而這些內容是靜態的，就是寫好的不變的檔案。通過URL定位到這些文件，將內容下載到瀏覽器上，由瀏覽器呈現。
網際網路發展，網民的需求增加，大家希望提供互動式訪問。使用者提交需求，服務端找到需求匹配的資源併發回瀏覽器端顯示。這就是動態網頁。
動態網頁指的是網頁的內容是動態的，URL不變，裡面的內容變化。例如訪問一個查詢頁面，提交的關鍵字不同，下面表格的內容變化。
動態網頁，表現的是瀏覽器端內容的變化，而本質上它是一種服務端動態網頁技術server-side dynamic webpage。
最早誕生的動態網頁技術有ASP、JSP、PHP等，後來幾乎所有流行的高階語言都提供了開發動態網頁的能力
網頁佈局
早期的網頁只需要簡單的顯示標題、正文、圖片，使用 <P> 標籤分段。
後來有人大量使用表格標籤，可以做到很好的內容佈局，也出現結構化的佈局方案。但隨著頁面內容的堆積，出現了成百上千個表格巢狀的情況，瀏覽器繪製很慢。
後來出現了Div + CSS佈局風格，捨棄了表格佈局，加上JavaScript，使得前後端開發分離，而且可以做到很好的自適應佈局。例如流式瀑布一樣的佈局。
同步和非同步
同步
早期，網頁就是一頁頁的文字，沒什麼圖片、樣式。
後來，網際網路時代到來，網頁內容越來越多，頁面檔案越來越大。
瀏覽器渲染HTML，需要先下載CSS載入，為的是準備渲染網頁。之後，下載網頁內容，並逐步渲染。還要構建DOM樹，載入JS指令碼並執行，JS可能需要修改DOM，網頁就要重新渲染。
如果JS放在網頁HEAD中，還需要等待JS下載並載入。
圖片使用 <img> 標籤，是發起新的HTTP請求，如果圖片返回，需要重新繪製網頁。
好不容易，一張網頁繪製完畢。這裡面發起了很多的HTTP請求。
互動式網頁，使用者提交了請求，就是想看到查詢的結果。伺服器響應到來後是一個全新的頁面內容，哪怕URL不變，整個網頁都需要重新渲染。例如，使用者填寫註冊資訊，只是2次密碼不一致，提交後，整個註冊頁面重新重新整理，所有填寫專案重新填寫（當然有辦法讓使用者減少重填）。這種互動非常不友好。
從代價的角度看，就是為了註冊的一點點資訊，結果返回了整個網頁內容，不但浪費了網路頻寬，還需要瀏覽器重新渲染網頁，太浪費資源了，影響了使用者體驗和感受。
上面這些請求的過程，就是同步過程，使用者發起請求，頁面整個重新整理，直到伺服器端響應的資料到來並重新渲染。
非同步
1996年微軟實現了iframe標籤，可以在一個網頁使用iframe標籤區域性非同步載入內容。
1999年微軟推出非同步資料傳輸的ActiveX外掛技術，太笨重了，但是也火了很多年。有一個元件XMLHttpRequest被大多數瀏覽器支援。
AJAX即“Asynchronous Javascript And XML”（非同步JavaScript和XML），使用XMLHttpRequest元件，結合JS，資料格式採用XML（可擴充套件標記語言），將這三者結合，實現網頁的非同步請求。AJAX是一種技術的組合，技術的重新發現，而不是發明，但是它深遠的影響了整個WEB開發。
2005，google在Gmail和地圖中應用Ajax，使它大受歡迎並推廣開來。
有了非同步請求，就可以動態的從瀏覽器發起請求到伺服器端，伺服器端返回響應的資料封裝成XML（JSON）返回給瀏覽器，瀏覽器只需要使用JS把內容加入到DOM中，區域性渲染就可以了。這個過程中，整個網頁不用重新重新整理，只需要區域性動態改變即可。
前端開發
早期前端開發使用網頁三劍客：Dreamweaver、Firework、Flash。微軟的有Frontpage。
不管使用什麼工具，都不能改變JS相容、CSS相容、瀏覽器版本相容問題，非常頭疼。
2006年 jQuery庫誕生，出現了JS框架，抹平了平臺差異。基於它產生了眾多的外掛，前端開發終於輕鬆了些。
2008年 V8引擎伴隨著Chrome瀏覽器釋出。
2009年 ES5標準釋出。
2009年 Nodejs釋出，伺服器端也可以使用JavaScript了。
2009年 AngularJS誕生，之後被谷歌收購。
2010年 Backbone.js誕生。
2011年 React和ember誕生，React於2013年5月開源。
2014年 國人 尤雨溪 的Vue.js誕生。
2014年 HTML5標準釋出。
前端工具和框架越來越多，前端開發已經不是隨便使用一個什麼文字編輯器就可以完成的了。如果使用框架，需要很多工具的配合，配置好一個開發環境非常重要。
硬體發展
最初，網頁就是簡單的文字，計算機輕鬆勝任。
後來，網頁對多媒體的支援，動態效果的支援，都需要使用大量的CPU、記憶體資源，甚至是顯示卡的渲染能力。
所以，個人PC需要不斷升級，否則瀏覽網頁很困難。
移動網際網路到來的早期，手機看的網頁，都需要單獨處理。
手機螢幕小、CPU弱、記憶體小，能看的網頁純文字加小圖。這樣產生的流量也小，2G時代談不上網速。
2007年第一代IPhone誕生，2008年安卓手機誕生，3G的移動網際網路時代到來了。
手機硬體水平不斷提升，手機的開發平臺可以讓眾多開發者開發APP，使用者可以下載安裝使用這些APP。
對於開發者來說，開發就是個問題了，是不是需要開發一套IPhone版本、再開發一套安卓，在開發一套網頁的版本呢？
2013年，中國開始進入4G時代。手機硬體水平也得到了很大的提升。
眾多平臺都在思考是否能夠一套架構，解決所有前端問題。使用的還是最通用的技術網頁+JS。
如今的前端開發已經不是以前的幾個js檔案、幾百行程式碼了。為了適應需求，新框架、新程式設計模式不斷湧現，這些工具都大大方便了協作開發，同時解決平臺相容性問題。