HTML渲染過程詳解

2024-04-27 15:08:30

字體：大中小

來源：轉載

供稿：網友

HTML渲染過程詳解

　　無意中看到寒冬關于前端的九個問題，細細想來我也只是對第一、二、九問有所了解，正好也趁著這個機會梳理一下自己的知識體系。由于本人對http協議以及dns對url的解析問題并不了解，所以這里之探討url請求加載到瀏覽器端時，瀏覽器對html的解析到呈現過程，后來經過幾位道友分享，整理了一下url解析的過程，如下：

用戶輸入url地址，瀏覽器根據域名尋找ip地址瀏覽器向服務器發送http請求，如果服務器段返回以301之類的重定向，瀏覽器根據相應頭中的location再次發送請求服務器端接受請求，處理請求生成html代碼，返回給瀏覽器，這時的html頁面代碼可能是經過壓縮的瀏覽器接收服務器響應結果，如果有壓縮則首先進行解壓處理，緊接著就是頁面解析渲染

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

解析HTML構建DOM樹DOM樹與CSS樣式進行附著構造呈現樹布局繪制

解析與構建DOM樹

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

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

<!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）外部樣式不會阻塞后續外部腳本的加載，但會阻塞外部腳本的執行。
<!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);　　從瀑布圖中我們可以看到，外部腳本與外部樣式是并行加載，但直到外部樣式加載完畢，外部腳本才開始執行
　　3）如果后續外部腳本含有async屬性（IE下為defer），則外部樣式不會阻塞該腳本的加載與執行
<!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>　　從瀑布圖中可以看到外部腳本的加載與執行并不受link的阻塞
　　4）對于動態創建的link標簽不會阻塞其后動態創建的script的加載與執行，不管script標簽是否具有async屬性，但對于其他非動態創建的script，以上三條結論仍適用
 View Code　　這是最終頁面結構
　　通過瀑布圖與頁面結果可以看到動態創建的外部腳本并未受link的阻塞。
　　link或style標簽都會被解析成DOM節點。瀏覽器對于樣式表還會生成CSSStyleSheet對象(C++代碼)，他集成子CSSStyle，指標是樣式表對象而不管該對象來自于Style還是link。該對象主要包含以下幾個重要屬性和方法
CSSRules 即css樣式代碼type 表示樣式表類型的字符串。對CSS樣式表而言，這個字符串是“type/css”。href 通過link生成的為樣式鏈接，否則為undefinedinsertRule(rule,index)：向cssRules集合中指定的位置插入rule字符串。IE不支持這個方法，但支持一個類似的addRule()方法。deleteRule(index)：刪除cssRules集合中指定的位置的規則。IE不支持這個方法，但支持一個類似的removeRule()方法。　　文檔中對于所有的樣式表集合可以通過document.styleSheets來訪問。同時對于style或link DOM元素可以通過element.sheet來訪問CSSStyleSheet對象，IE中則通過element.styleSheet來訪問。
　　html解析完畢，DOM樹創建完成后DOMContentLoaded事件即觸發，這時候可以用過script來操作DOM節點。
 
構建呈現樹　　
　　HTML解析完畢后，開始構建呈現樹RenderTree，這一步的主要工作在于將css樣式應用到DOM節點上，WebKit內核將這一過程稱為附著，其他瀏覽器有不同的概念。對前端工程師而言這個過程會涉及到CSS層疊問題。
　　首先將根據樣式重要性排序，由低到高依次為：
瀏覽器聲明用戶普通聲明作者普通聲明作者重要聲明用戶重要聲明　　對于同一重要級別，則是根據CSS選擇符的特指度來判定優先級；一條樣式聲明的特指度由以下四個部分決定：S-I-C-E
聲明來自內聯的style屬性則 S+1；聲明中含有id屬性則 I+1；聲明中含有類、偽類、屬性選擇器則 C+1；生命中含有元素、偽元素選擇器則 E+1；　　特指度的比較類似于兩個字符串之間比較大小。
　　呈現樹的每一個節點即為與其相對應的DOM節點的CSS框，框的類型與DOM節點的display屬性有關，block元素生成block框，inline元素生成inline框。每一個呈現樹節點都有與之相對應的DOM節點，但DOM節點不一定有與之相對應的呈現樹節點，比如display屬性為none的DOM節點，而且呈現樹節點在呈現樹中的位置與他們在DOM樹中的位置不一定相同，比如float與絕對定位元素。
　　下圖為呈現樹與其相對應的DOM樹節點
布局
　　呈現樹構造完成后瀏覽器便進行布局處理，及計算每個呈現樹節點的大小和位置信息。有道友可能要問，前面已將樣式附著到DOM節點上，不是已經有了樣式信息為何還要計算大小。這里可以這樣理解，以上包含大小的樣式信息只是存在內存里，并沒有實際使用，瀏覽器要根據窗口的實際大小來處理呈現樹節點的實際顯示大小和位置，比如對于margin為auto的處理。
　　布局是一個遞歸過程，從跟呈現節點開始，遞歸遍歷子節點，計算集合幾何信息。具體過程還是比較復雜偶也不甚了解，道友們還是查閱其他資料吧。
 
繪制
 　　布局完成后，便是將呈現樹繪制出來顯示在屏幕上。對于每一個呈現樹節點來說，主要繪制順序如下：
背景顏色背景圖片邊框子呈現樹節點輪廓 
 參考資料：
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文章有錯誤之處歡迎各位道友不吝指正