(轉)瀏覽器端技術體系概覽 -- 前端開發的七種武器

瀏覽器端技術體系概覽 -- 前端開發的七種武器          博客分類：

• 前端科普

JavaScript DHTML AJAX HTTP HTML 

科普文一則,說說我對前端技術體系(也稱瀏覽器端技術體系)的認識,但願能讓更多人瞭解前端,也但願能借此豐富前端開發的大局觀.
去年我寫了 網站性能優化系列文章,看過的朋友會知道,這類文章重點並不是介紹各類具體的優化技巧,而是在關注發掘這些優化點的思路和方法.而後介紹給你們多種檢測手段去發現問題,進而有目標的解決問題.全部這些須要咱們對有網頁整個生命週期有清晰的認識,對網頁中各類技術極其相互結合的方式有明確的認知.這就回歸到一個更本質的問題:瀏覽器端技術體系是怎樣的.
想用三言兩語說清前端技術不大可能,可是用一篇不長的文章說清何謂前端,仍是能夠作到的.由於工做中我常會給後臺開發的同窗介紹前臺技術,因此會常常涉及這類話題.
解析前端,我想須要回答以下幾個問題. 1.前端涉及幾種技術?分別是作什麼的? 2.在前端內部各類技術之間如何整合協做? 3.前端如何和後臺交流?
回答這些問題我會當即丟出前端開發的"七種武器"論,介紹前端主要涉及七種技術分別是什麼的同時,重點關注"七種武器"如何對內協做,如何對外交流.(鑑於本文的科普文性質,下面具體介紹中出現的"一切","都是","所有"這類定語可能並不是絕對,但能夠肯定在99%的狀況下是正確的)
一.HTTP:網頁上的一切來自Http請求 頁面上全部內容都是經過若干Http請求從服務端加載而來. 第一個請求一般是一份(X)HTML文檔,也就是瀏覽器中地址欄的指向.如圖:         (這張圖能夠經過Fixfox的Firebug插件,IE的Httpwatch工具,或者Chrome直接按Ctrl+Shift+I獲得) 地址欄中的url一般會包含地址和一些參數,這樣就能夠找到對應的後臺服務,同時讓其據這些動態參數來肯定輸出內容.
多個Http請求之間是獨立的.那麼其餘請求又是由誰觸發的呢? 由瀏覽器觸發!是在瀏覽器解析這第一份(X)HTML文檔的過程當中發出,接下來我就將介紹這個過程.
二.HTML:在瀏覽器中HTML被解析成DOM樹 HTML文檔是一份不那麼嚴謹的XML(文本)文檔.在任意網頁上點擊右鍵,點擊查看源代碼就能夠看到. 瀏覽器按照HTML文檔內容自上而下的解析運行.最終HTML文本被完整的解析成一顆樹,稱DOM樹. 注意:DOM樹是瀏覽器內一切所依附的根本,是本文的重點,之後也會屢次強調.         (這張圖能夠經過Fixfox的Firebug插件,IE8/9按F12,或者Chrome直接按Ctrl+Shift+I找到) 繼續回答以前的問題:其他的HTTP請求,除XHR(後面會介紹),CSS的@import和背景圖以外,幾乎都是在解析HTML時,由DOM樹上的幾種特定節點發起的.如圖中重點標示出的那些節點:

• <img>:用來嵌入圖片
• <iframe>:用來嵌套其餘HTML
• <link>:能夠用來引入CSS文件
• <script>:能夠用來引入JavaScript文件
• <object>和<embed>:一般用來引入Flash文件

之因此強調這一點,一是它說明了HTML和Http的關係:首個Http載入HTML,解析HTML發起其餘Http.二來再次強調了DOM樹,請求在HTML解析爲DOM樹過程當中,在樹上節點被解析出來時觸發.
三.CSS:使用CSS設定展示樣式和網頁佈局 如何定義網頁的樣式,好比字體的顏色和大小?這是CSS的工做.

<!--CSS出現以前,使用額外的樣式節點-->
<span><font size="50" color="red">文本</font></span>
<!--CSS,統一在節點的style屬性內定義-->
<span style="color:red,font-size:50px">文本</span>
<!--CSS,在節點以外統必定義,經過class,id等屬性關聯至節點-->
<span class="myTxt">文本</span>

<!--CSS出現以前,使用額外的樣式節點-->
<span><font size="50" color="red">文本</font></span>
<!--CSS,統一在節點的style屬性內定義-->
<span style="color:red,font-size:50px">文本</span>
<!--CSS,在節點以外統必定義,經過class,id等屬性關聯至節點-->
<span class="myTxt">文本</span>

咱們看到最後一種方式,爲<span>節點指定了class屬性myTxt.而myTxt的詳細定義能夠以兩種方式加入文檔.

<!--在style標籤內定義-->
<style>
    .myTxt:{color:red,font-size:50px}
</style>
<!--經過<link>標籤引入額外的css,內部包含myTxt類的樣式定義-->
<link rel="stylesheet" type="text/css" href="http://a.com/a.css"/>

<!--在style標籤內定義-->
<style>
    .myTxt:{color:red,font-size:50px}
</style>
<!--經過<link>標籤引入額外的css,內部包含myTxt類的樣式定義-->
<link rel="stylesheet" type="text/css" href="http://a.com/a.css"/>

固然CSS的功能不止是簡單的樣式定義,還能夠經過定義區塊的位置肯定網頁佈局方式,CSS也天然有其一套語法,描述CSS的功能,以及肯定CSS規則與DOM節點之間的關聯.這些細節並不是本文重點.
咱們看到CSS或者經過節點的style屬性,或者經過特定的<style><link>節點影響網頁,這又回到了咱們反覆強調的內容,DOM樹,CSS並未脫離DOM樹,而是駐留其上.
四.JavaScript:使用JavaScript處理交互事件 說到JavaScript,不如先澄清下"Java與JavaScript的關係是雷鋒與雷峯塔的關係". 網頁應用是典型的事件驅動GUI系統.JavaScript爲交互事件,時間線上的事件定義響應體. 咱們看一個簡單的應用,點擊按鈕,彈出一個警告框.

<!--直接寫在onclick屬性中-->
<button onclick="alert(1)"></button>
<!--在onclick屬性中,調用test_clk方法-->
<button onclick="test_clk()"></button>
<!--在script標籤中,定義test_clk方法-->
<script>
    function test_clk(){
        alert(1);
    }
</script>
<!--在script標籤引入外部js文件,內部包含test_clk方法的定義-->
<script src="http://a.com/a.js"></script>

<!--直接寫在onclick屬性中-->
<button onclick="alert(1)"></button>
<!--在onclick屬性中,調用test_clk方法-->
<button onclick="test_clk()"></button>
<!--在script標籤中,定義test_clk方法-->
<script>
	function test_clk(){
		alert(1);
	}
</script>
<!--在script標籤引入外部js文件,內部包含test_clk方法的定義-->
<script src="http://a.com/a.js"></script>

接下來咱們有個問題,js何時運行?

• 首先,當瀏覽器解析到<script>標籤時,開始運行其內的代碼.
• <script>標籤內代碼或者其餘標籤內的特定屬性中能夠定義事件響應體,在事件觸發時執行
• script代碼能夠指定某些代碼在指定時長後開始執行,或每隔必定間隔重複執行

重要的是咱們仍是看到了,JS一樣沒有脫離DOM樹.同CSS同樣駐留DOM樹上.同時須要明確的是JS是被load到客戶端瀏覽器以後,在瀏覽器中運行的,消耗的是客戶端計算資源.JS爲瀏覽器端提供了計算能力,而瀏覽器端則是JS的宿主.JS做爲一種腳本語言,其實並不必定非要工做在瀏覽器這個宿主之上,但這脫離了前端技術體系,這裏不討論.
說到這裏,咱們基本瞭解了構成一個獨立網頁的幾項要素,各自負責什麼,相互間如何協做.你們可能注意到,前面曾經說過每一個http請求時相互獨立的,那麼如何讓各個網頁關聯起來呢?
首先網頁之間經過連接<a>或<form>表單關聯到一塊兒.通常狀況網頁之間經過點擊<a>造成一個新的執行a標籤href屬性的HttpGet請求,讓瀏覽器從一個頁面轉向另外一個.
當須要瀏覽者經過客戶端提交數據時,咱們一般製做一個表單,而後submit表單,將客戶數據將會經過HttpPost請求提交至另外一個地址.
除此以外的另外一個需求就是保持登錄狀態了,這須要一段信息始終在各個網頁間傳遞,可是放在url參數中顯然是不安全的.那如何實現這個功能?這正是接下來介紹的內容.
五.Cookie:藉助Cookie標識瀏覽者身份,在頁面間保持會話 再次回到Http自己,它是一種無狀態的協議,分爲Header和Body兩部分,Body是http傳遞的主體內容,Header又分爲請求頭(RequestHeader)和(ResponseHeader)兩部分,而header中除了包含代表網頁間關係的參數以外也包含一些通用信息,頭當中的信息以鍵值對的方式書寫,主要負責通用的緩存策略描述和身份標識等功能,如圖:         (這張圖,即爲第一張圖中某個http請求點開以後看到的詳情,須要注意圖中上面列出了響應頭,下面是請求頭,和發生順序不一致.firebug就是這個順序,注意區分) 服務端能夠經過響應頭種植cookie到客戶端,而客戶端的每一個請求的請求頭中都會攜帶域名下的cookie.好比這個到limu.iteye.com的請求,會包含iteye.com下的cookie,同時也包括limu.iteye.com的cookie.服務端能夠經過cookie儲存會話id,這樣多個請求之間就有了關聯.同時服務端set cookie時指定cookie設置到哪兒域名及路徑下,以及在客戶端將駐留多久.
最後說一下JavaScript和Cookie的關係,JavaScript能夠讀寫所在頁面域名下的cookie值. 須要注意在http://www.a.com下面引入了http://www.b.com/b.js,b.js能讀取所在頁面,也就是www.a.com以及a.com下的cookie,而非b.com下的cookie.而b.js這個http的請求頭中則帶有b.com系列的cookie,這個請求的響應頭中,也只能給b.com種植cookie.這裏有點繞,但有必要澄清,能夠遇到問題的時候能夠再仔細看.
到此爲止,咱們瞭解了一個網頁的構成要素,也瞭解了網頁之間的聯繫,這樣咱們就瞭解了一個傳統網站的前端技術體系.接下來咱們介紹一些新花樣,正是這些帶來了Web2.0的前端變革.
六.DHTML:使用JavaScript操做Dom樹 回到網頁以內,其實咱們只是得到了一顆DOM樹,其餘內容都駐留在樹上. 接下來咱們想一下,若是有一種手段可以爲所欲爲的改變更態這棵樹,那豈不是咱們就在客戶端擁有了徹底控制一個網頁的能力.這項能力天然由JavaScript承擔.         接下來設想一下,操做一個棵樹,也就是一份結構化的XML文檔咱們須要怎樣的API?

• 找到一個或一組葉子節點,從一個節點出發找到相關節點:父,子,兄弟.
• 新增/複製節點,並插入到文檔中指定位置,以及刪除節點.
• 增刪改葉子節點某個屬性以及節點包含的文本.

因而 W3C(萬維網聯盟)的 DOM Level 1,2&3中定義了3個層次一系列Dom上的操做接口.其中Level1主要包含上面這些接口.在各類瀏覽器下Level 1基本都能被正確實現.
回憶一下,以前咱們提到了JS的三個執行入口,很重要的一個是響應各類鼠標鍵盤事件,如何爲節點綁定事件響應動做,IE有獨特的事件模型.其他瀏覽器的事件模型符合W3C DOM接口定義.
這一系列技術被稱爲D(Dynamic)HTML,其核心是經過JS將Http,HTML,CSS,JavaScript更好的粘合在一塊兒.經過JavaScript能夠改變網頁內的一切,甚至包括動態引入新的CSS和JS. 很酷是麼?但單獨DHTML並未流行起來,由於咱們空有力量殊不知道用到哪裏合適.因而當接下來介紹的技術被引入,當咱們可以根據服務端的指示來運用前臺的力量,一場影響深遠的真正的技術變革就此發生了.而在此以前,咱們有必要意識到,DHTML不過是瀏覽器中JavaScript能力的一種擴展.
七.Ajax:使用JavaScript在網頁內與服務器端交互 有了DHTML,JavaScript已經具備能力徹底的改變所在網頁的每一個細節.JavaScript的野心不止於此,若是JS能由事件驅動,從服務器端源源不斷的獲取新鮮數據,那理論上再也不須要第二個頁面了. 咱們再回憶下,網頁上一切來自HTTP,獲取數據天然須要JavaScript發起HTTP請求,而且能夠讀懂這個Http請求響應內容.因而有了XHR(XmlHttpRequest),首先做爲一個ActiveX控件被IE5引入(這裏必需要感謝IE對不對?). XHR就是這樣一個能夠由JS發送Http請求,且當請求數據返回後將服務端數據交給JS的對象.並且XHR支持異步請求,在Http請求的過程當中(由於是和服務端打交道,因此這個操做耗時可能較長),頁面還能夠正常工做,直到Http響應後會才觸發一個事件回調JS方法處理數據.         現在Ajax並不單指XHR.全部在不離開當前頁面的前提下,由JS主動發起的從服務器端獲取JS可解析數據的方案,皆可稱Ajax. 最多見的另外一種Ajax實現方案是JSONP,JS經過DOM接口,建立一個<script>節點,指定節點的src爲一個http地址到數據服務器,數據被包裝成可執行的JS,在http響應結束後當即執行.(這裏咱們再一次涉及到了JS的執行入口之一,在瀏覽器遇到<script>節點是執行).
在MS,Google等先驅的引導之下,Ajax的出現引發了前端領域,乃至整個互聯網開發領域的深入變革,即爲咱們熟知的Web2.0.但回到本源,Ajax依然是瀏覽器中JavaScript能力的另外一種擴展而已.
總結一下

1. HTTP:一切內容經過HTTP請求得到
2. HTML:瀏覽器把HTML解析成DOM樹
3. CSS:定義HTML的佈局和樣式
4. JavaScript:提供計算能力,處理交互事件
5. Cookie:網頁間,請求間會話保持(JS能夠操做Cookie)
6. DHTML:JavaScript操做Dom樹(包括CSS)
7. AJAX:JavaScript操縱HTTP

• 全部前端應用託生於這些基礎特性的整合
• Web2.0主要託生於DHTML和AJAX這類JavaScript的能力擴展

前端技術體系的介紹能夠告一段落,咱們並無把一個個概念的英文縮寫展開,而後抄來晦澀的官方的解釋. "使用Http傳輸HTML文檔,文檔被解析成DOM樹,CSS負責佈局和樣式,JS提供計算能力,處理事件響應,Cookie維持會話." 沒錯,若是換你來寫一個瀏覽器,會不會也這樣作?那麼其餘的客戶端圖形交互系統,是否是也同樣要完成傳輸,展示,事件交互等等功能? 若是我繼續介紹一下firebug這類前端開發工具,將其與七種武器對應上,再輔以一些API文檔,就能夠嘗試體驗下前端開發了.
最後和前端開發講幾句 讀到這裏的前端開發,先說聲抱歉,寫了這麼長,通篇都是你爛熟於心的內容.並且你明明瞭解更多,這裏卻沒有提到. 其實要點就在這裏,如何在你全部知道的內容中提出來若干要點,完整的描述前端技術體系,這件事情對於前端開發而言,重要麼?不重要麼?重要麼?不重要麼?咱們看幾個問題:
爲何會有DHTML? 咱們瞭解Http,HTML,CSS,JS的協做關係,知道DOM樹是一切的依託,咱們纔會想到經過改變DOM樹來操縱網頁內的一切.
爲何會有Ajax? 咱們瞭解DHTML的能力,殊不知道其用武之地,後來咱們想到依靠服務端指導.接下來咱們又知道全部服務端內容都是經過Http得到,天然咱們須要JavaScript可以操做的Http對象.
這些問題須要前端開發去發現,去解決.雖然你們都在跟着先賢們的步子走,不多能成爲領域的開拓者,可是否瞭解整個前端技術體系的區別是你是不是在盲目跟風.區別是當一項新技術出現的時候是否能發現其解決的核心問題以及爲解決問題付出的額外代價.
引入新技術的須要付出的額外代價是我要強調的另外一個重點,使用DHTML的代價是什麼,嚴重依賴Ajax的代價又是什麼?瞭解這些而後咱們才能更好的權衡要不要使用.
前端的發展依然在繼續,遇到什麼問題?如何解決?

• Cookie容量小,每次隨Http發送,是否經過JS在客戶端存儲更多數據? -- LocalStorage
• JS單線程,可否讓JS進行大量計算的時候,頁面再也不掛起? -- WebWorkers
• JS語言過於隨意,依賴繁雜,如何組織代碼能方便共享智慧? -- CommonJS Modules
• Http無狀態短鏈接,可否讓客戶端更及時收到服務端消息?  -- 各類Comet
• Http頭較大沒法壓縮,沒法一個請求返回多個數據對象,怎麼辦? -- 使用SPDY協議

解決問題付出什麼代價?是否涵蓋了全部經常使用瀏覽器,若是不能是否作到了漸進加強?咱們要不要這樣作?這些是作一名合格的前端,作一名對技術架構有影響力的前端,必然面對的問題. 前端技術體系,看起來題目很大,但其實並無玄之又玄的東西在裏邊,因此即使我寫的算不得優秀,可是說清楚仍是能夠的.我在面試高級前端的時候其實很在乎前端大局觀,否則叫我如何放心的把一個將會持續發展的產品交到他手裏.