HTML渲染過程詳解

2024-04-27 15:11:06

字體：大中小

供稿：網(wǎng)友

網(wǎng)絡(luò)請求過程：

1、先發(fā)請求給DNS進(jìn)行域名解析獲取服務(wù)器ip2、向步驟1獲取的服務(wù)器IP發(fā)送HTTP請求3、服務(wù)器接收請求后，解析主機頭對應(yīng)的站點，把請求傳送給站點4、站點接受轉(zhuǎn)發(fā)的請求作出回應(yīng)并返回HTTP回應(yīng)5、瀏覽器接到返回的HTTP回應(yīng)，解析頭信息和HTML主體6、根據(jù)解析的頭信息設(shè)置必要的數(shù)據(jù)，如cookie，編碼，語言等聲明的處理7、在6的基礎(chǔ)上對HTML主體進(jìn)行渲染展現(xiàn)

解析渲染該過程主要分為以下步驟：

解析HTML構(gòu)建DOM樹DOM樹與CSS樣式進(jìn)行附著構(gòu)造呈現(xiàn)樹布局繪制

解析與構(gòu)建DOM樹

　　前兩步我們放在一起討論，瀏覽器的實際工作也是將他們放在一起進(jìn)行的。對于HTML瀏覽器有專門的html解析器來解析HTML，并在解析的過程中構(gòu)建DOM樹。在這里我們討論兩種DOM元素的解析，即樣式（link、style）與腳本文件（script）。由于瀏覽器采用自上而下的方式解析，在遇到這兩種元素時都會阻塞瀏覽器的解析，直到外部資源加載并解析或執(zhí)行完畢后才會繼續(xù)向下解析html。對于樣式與腳本的先后順序同樣也會影響到瀏覽器的解析過程，究其原因主要在于：script腳本執(zhí)行過程中可能會修改html界面（如document.write函數(shù)）；DOM節(jié)點的CSS樣式會影響js的執(zhí)行結(jié)果。在我的測試中得到以下四條結(jié)論：

　　1）外部樣式會阻塞后續(xù)腳本執(zhí)行，直到外部樣式加載并解析完畢。

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title>  <script>var start = +new Date;</script>  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">  </head>  <body>  <span id="result"></span>  <script>    var end = +new Date;    document.getElementById('result').innerHTML = (end-start);  </script></body></html>
　　2）外部樣式不會阻塞后續(xù)外部腳本的加載，但會阻塞外部腳本的執(zhí)行。
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title>  <script>var start = +new Date;</script>  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">  </head>  <body>  test  <script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a"></script>  <div id="result"></div>  <script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script>  </body></html>var loadTime = document.createElement('div');loadTime.innerText = document.currentScript.src + ' executed @ ' + window.performance.now();loadTime.style.color = 'blue';document.body.appendChild(loadTime);　　從瀑布圖中我們可以看到，外部腳本與外部樣式是并行加載，但直到外部樣式加載完畢，外部腳本才開始執(zhí)行
　　3）如果后續(xù)外部腳本含有async屬性（IE下為defer），則外部樣式不會阻塞該腳本的加載與執(zhí)行
<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title>  <script>var start = +new Date;</script>  <link href="http://udacity-crp.herokuapp.com/style.css?rtt=2" rel="stylesheet">  </head>  <body>  test  <script src="http://udacity-crp.herokuapp.com/time.js?rtt=1&a" async></script>  <div id="result"></div>  <script>var end = +new Date;document.getElementById("result").innerHTML = end-start;</script>  </body></html>　　從瀑布圖中可以看到外部腳本的加載與執(zhí)行并不受link的阻塞
　　4）對于動態(tài)創(chuàng)建的link標(biāo)簽不會阻塞其后動態(tài)創(chuàng)建的script的加載與執(zhí)行，不管script標(biāo)簽是否具有async屬性，但對于其他非動態(tài)創(chuàng)建的script，以上三條結(jié)論仍適用
 View Code　　這是最終頁面結(jié)構(gòu)
　　通過瀑布圖與頁面結(jié)果可以看到動態(tài)創(chuàng)建的外部腳本并未受link的阻塞。
　　link或style標(biāo)簽都會被解析成DOM節(jié)點。瀏覽器對于樣式表還會生成CSSStyleSheet對象(C++代碼)，他集成子CSSStyle，指標(biāo)是樣式表對象而不管該對象來自于Style還是link。該對象主要包含以下幾個重要屬性和方法
CSSRules 即css樣式代碼type 表示樣式表類型的字符串。對CSS樣式表而言，這個字符串是“type/css”。href 通過link生成的為樣式鏈接，否則為undefinedinsertRule(rule,index)：向cssRules集合中指定的位置插入rule字符串。IE不支持這個方法，但支持一個類似的addRule()方法。deleteRule(index)：刪除cssRules集合中指定的位置的規(guī)則。IE不支持這個方法，但支持一個類似的removeRule()方法。　　文檔中對于所有的樣式表集合可以通過document.styleSheets來訪問。同時對于style或link DOM元素可以通過element.sheet來訪問CSSStyleSheet對象，IE中則通過element.styleSheet來訪問。
　　html解析完畢，DOM樹創(chuàng)建完成后DOMContentLoaded事件即觸發(fā)，這時候可以用過script來操作DOM節(jié)點。
 
構(gòu)建呈現(xiàn)樹　　
　　HTML解析完畢后，開始構(gòu)建呈現(xiàn)樹RenderTree，這一步的主要工作在于將css樣式應(yīng)用到DOM節(jié)點上，WebKit內(nèi)核將這一過程稱為附著，其他瀏覽器有不同的概念。對前端工程師而言這個過程會涉及到CSS層疊問題。
　　首先將根據(jù)樣式重要性排序，由低到高依次為：
瀏覽器聲明用戶普通聲明作者普通聲明作者重要聲明用戶重要聲明　　對于同一重要級別，則是根據(jù)CSS選擇符的特指度來判定優(yōu)先級；一條樣式聲明的特指度由以下四個部分決定：S-I-C-E
聲明來自內(nèi)聯(lián)的style屬性則 S+1；聲明中含有id屬性則 I+1；聲明中含有類、偽類、屬性選擇器則 C+1；生命中含有元素、偽元素選擇器則 E+1；　　特指度的比較類似于兩個字符串之間比較大小。
　　呈現(xiàn)樹的每一個節(jié)點即為與其相對應(yīng)的DOM節(jié)點的CSS框，框的類型與DOM節(jié)點的display屬性有關(guān)，block元素生成block框，inline元素生成inline框。每一個呈現(xiàn)樹節(jié)點都有與之相對應(yīng)的DOM節(jié)點，但DOM節(jié)點不一定有與之相對應(yīng)的呈現(xiàn)樹節(jié)點，比如display屬性為none的DOM節(jié)點，而且呈現(xiàn)樹節(jié)點在呈現(xiàn)樹中的位置與他們在DOM樹中的位置不一定相同，比如float與絕對定位元素。
　　下圖為呈現(xiàn)樹與其相對應(yīng)的DOM樹節(jié)點
布局
　　呈現(xiàn)樹構(gòu)造完成后瀏覽器便進(jìn)行布局處理，及計算每個呈現(xiàn)樹節(jié)點的大小和位置信息。有道友可能要問，前面已將樣式附著到DOM節(jié)點上，不是已經(jīng)有了樣式信息為何還要計算大小。這里可以這樣理解，以上包含大小的樣式信息只是存在內(nèi)存里，并沒有實際使用，瀏覽器要根據(jù)窗口的實際大小來處理呈現(xiàn)樹節(jié)點的實際顯示大小和位置，比如對于margin為auto的處理。
　　布局是一個遞歸過程，從跟呈現(xiàn)節(jié)點開始，遞歸遍歷子節(jié)點，計算集合幾何信息。具體過程還是比較復(fù)雜偶也不甚了解，道友們還是查閱其他資料吧。
 
繪制
 　　布局完成后，便是將呈現(xiàn)樹繪制出來顯示在屏幕上。對于每一個呈現(xiàn)樹節(jié)點來說，主要繪制順序如下：
背景顏色背景圖片邊框子呈現(xiàn)樹節(jié)點輪廓
參考資料：
http://velocity.oreilly.com.cn/2010/PPTs/limufromTaobao.pdfhttp://lifesinger.WordPRess.com/http://hikejun.com/blog/2012/02/02/js%E5%92%8Ccss%E7%9A%84%E9%A1%BA%E5%BA%8F%E5%85%B3%E7%B3%BB/http://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/http://www.2cto.com/kf/201406/305852.htmlhttp://www.w3cmm.com/dom/document-stylesheets-getstylesheet.htmlhttp://www.cnblogs.com/wenanry/archive/2010/02/25/1673368.html