基礎知識了解chrome的Timeline工具

主要過程

解析與構建DOM樹1外部樣式腳本并行加載外部樣式會阻塞后續腳本執行直到外部樣式加載并解析完畢

2 外部樣式不會阻塞后續腳本的加載但會阻塞后續腳本的執行

3 如果后續外部腳本含有async屬性則該腳本不會被樣式文件阻塞

4 動態創建的樣式文件不會阻塞其后的script的執行不管script標簽是否具有async屬性

5動態創建的樣式文件不會阻塞其后動態創建的script的執行

6動態創建的腳本的加載和執行均會被之前的樣式文件阻塞但不會阻塞后續腳本的執行

構建渲染樹繪制與布局

1.基礎知識：了解chrome的Timeline工具

僅僅是通過理論知識，很難記住和理解瀏覽器解析html的原則，因此我動手做了些小實驗。而做這個實驗，不得不用到一個工具：chrome的Timeline工具。

這個工具真的很強大，Timeline工具欄提供了對于在裝載Web應用的過程中，時間花費情況的概覽，這些應用包括處理DOM事件, 頁面布局渲染或者向屏幕繪制元素。Timeline可以通過事件，框架，和實時內存用量3個方面的數據來監測網頁，通過這些數據，我們可以方便的找出頁面中存在問題的地方。

具體的使用方式，這篇博客里有詳盡的說明。

2.主要過程

主要渲染過程可以這么歸納(參考文獻：http://www..com/dojo-lzz/p/3983335.html)

解析HTML

構建DOM樹

DOM樹與CSS樣式進行附著構造呈現樹

布局

繪制

3.解析與構建DOM樹

瀏覽器有專門的html解析器，并且是邊解析邊構建do’m樹的，因此將前兩部分放在一塊講。

總體的解析原則是：1.自上而下順序解析。2.解析過程中遇到外部樣式(link,style)和外部腳本(script),會阻塞瀏覽器的解析。3.外部樣式和外部腳本(在沒有async、defer屬性下)會并行加載，但是外部樣式會阻塞外部腳本的執行。

即：html解析->外部樣式、腳本加載->外部樣式執行->外部腳本執行->html繼續解析

情況一：如果是動態腳本(即內聯腳本)則不受樣式影響，在解析到它時會執行。

情況二：如果是動態創建的樣式文件，則不會阻塞后續任何類型腳本的執行。

情況三：外部樣式后續外部腳本含有async屬性(IE下為defer)，外部樣式不會阻塞該腳本的加載與執行

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

JS Bin

I am here!

I am here two!

document.getElementById('result').innerHTML = (end-start);

代碼運行結果：

并行加載：

阻塞執行：

可以看到，外部css加載并解析(parse)完畢之后才執行后面的js代碼。

注意

dom樹構建完畢會觸發DOMContentLoaded事件，但此時外部文件不一定加載完畢，比如一些圖片。當頁面加載完畢后才出發load事件，這也是 jquery的$ (document).ready(function(){})和原生代碼window.οnlοad=function(){}的區別。(其他區別： window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個; $(document).ready()可以同時編寫多個，并且都可以得到執行 )

3.2 外部樣式不會阻塞后續腳本的加載，但會阻塞后續腳本的執行

JS Bin

test

外部腳本代碼：

var loadTime = document.createElement('div');

loadTime.innerText = document.currentScript.src + ' executed @ ' + window.performance.now();

loadTime.style.color = 'blue';

document.body.appendChild(loadTime);

執行結果：

在瀑布流中查看外部文件加載順序：

可以看到，確實是按先后順序發起請求，但是并行加載。

可以看你到，在外部樣式加載和解析完畢，外部腳本才開始執行

3.3 如果后續外部腳本含有async屬性，則該腳本不會被樣式文件阻塞

這里我直接在3.2 中外部腳本標簽中加入async ,代碼就不貼了，看下執行結果：

可以看到 外部引入的time.js文件在不沒有被css阻塞。

3.4 動態創建的樣式文件不會阻塞其后的script的執行，不管script標簽是否具有async屬性

JS Bin

test

link.href = "http://udacity-crp.herokuapp.com/style.css?rtt=2";

link.rel = "stylesheet";

document.head.appendChild(link);

運行結果：

動態創建的link加載了3秒左右，而第一個script腳本(line:6)在67ms時執行，第三個script腳本(line:19)在75ms左右執行。

3.5動態創建的樣式文件不會阻塞其后動態創建的script的執行

JS Bin

test

link.href = "http://udacity-crp.herokuapp.com/style.css?rtt=2";

link.rel = "stylesheet";

document.head.appendChild(link);

var script = document.createElement('script');

script.src = "http://udacity-crp.herokuapp.com/time.js?rtt=1&a";

document.head.appendChild(script);

可以看到，動態腳本在3秒左右才加載完畢，后其后的腳本在1.8秒左右就以及加載并執行了。另外第三個script標簽在2ms左右就執行了，可見，js腳本無論是動態創建還是直接引入在頁面的，順序加載，但并行執行。這個在3.6節進行進一步證明。

3.6動態創建的腳本的加載和執行均會被之前的樣式文件阻塞,但不會阻塞后續腳本的執行

JS Bin

test

script.src = "http://udacity-crp.herokuapp.com/time.js?rtt=1&a";

document.head.appendChild(script);

可以看到，動態創建的腳本并沒有阻塞后面腳本的執行，而且它的執行方式和其他腳本一樣，均會被之前的CSS阻塞

4 構建渲染樹，繪制與布局

在外部樣式執行完畢后，css附著于DOM，創建了一個渲染樹(渲染樹是一些被渲染對象的集)，也就是說渲染樹與dom樹是同時構建的。每個渲染對象都包含了與之對應的計算過樣式的DOM對象，對于每個渲染元素來說，位置都經過計算，所以這里被叫做“布局”。然后將“布局”顯示在瀏覽器窗口，稱之為“繪制”。

同腳本文件一樣，CSS樣式表會阻塞圖片的加載，而腳本文件不會。接著腳本的執行完畢后，DOM樹構建完成。

渲染樹的節點(渲染器)，在Gecko中稱為frame，而在webkit中稱為renderer。渲染器是在文檔解析和創建DOM節點后創建的，會計算DOM節點的樣式信息。

在webkit中，renderer是由DOM節點調用attach()方法創建的。attach()方法計算了DOM節點的樣式信息。attach()是自上而下的遞歸操作。也就是說，父節點總是比子節點先創建自己的renderer。銷毀的時候，則是自下而上的遞歸操作，也就是說，子節點總是比父節點先銷毀。

如果元素的display屬性被設置成了none，或者如果元素的子孫繼承了display:none，renderer不會被創建。節點的子類和display屬性一起決定為該節點創建什么樣的渲染器。但是visibility：hidden的元素會被創建

具體如何構建渲染樹，可參見：

【瀏覽器渲染原理】渲染樹構建之渲染樹和DOM樹的關系

HTML渲染過程詳解

總結

以上是生活随笔為你收集整理的html怎么用chrome测试,通过chrome调试器测试了解浏览器解析和渲染HTML的过程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。