解析html
構建dom樹（第1，2一般是同時執行）
載入外部樣式表
解析外部樣式表為cssom樹
將dom樹和cssom樹關聯在一起形成渲染樹（render樹），有哪些節點，各個節點的css定義以及他們的從屬關係。
布局，根據渲染樹計算頁面元素的大小，位置等資訊
渲染，將布局計算好的元素渲染到頁面上
解析html的時候，是從上到下解析的，如果遇到外部指令碼（script）,會停掉解析html的工作，先載入script內容，等載入完，並且script的內容執行完畢之後，才會繼續解析html的工作，既然解析html的工作停止了，那頁面渲染肯定不會繼續執行，客戶端使用者看到的就是一片空白，所以如果將外部指令碼放到html上部，會阻塞頁面的渲染，因為阻塞了解析html的工作。另外，如果script中需要操作dom，此時dom樹還沒有構建完成，因此找不到dom元素，就會報錯。
在第五步，將dom樹和cssom關聯在一起，形成渲染樹的過程，是乙個非常複雜並且
開銷很大的過程（具體過程我也沒研究過），因此dom結構盡量簡單，css中盡量使用class和id，不要各種巢狀標籤寫太深。
重排（回流，reflow），第6步中，布局計算好了頁面元素的大小，位置等資訊之後，通過js等手段，修改元素的幾何屬性或者dom節點，就要重新計算布局。由於瀏覽器渲染介面是基於流式布局模型的，也就是某乙個dom節點資訊更改了，就需要對dom結構進行重新計算，重新布局介面，再次引發回流，只是這個結構更改程度會決定周邊dom更改範圍，即全域性範圍和區域性範圍，全域性範圍就是從根節點html開始對整個渲染樹進行重新布局，例如當我們改變了視窗尺寸或方向或者是修改了根元素的尺寸或者字型大小等；而區域性布局可以是對渲染樹的某部分或某乙個渲染物件進行重新布局。
————
會引起重排的操作有：
1）頁面首次渲染。
2）瀏覽器視窗大小發生改變。
3）元素尺寸或位置發生改變。
4）元素內容變化（文字數量或大小等等）。
5）元素字型大小變化。
6）新增或者刪除可見的dom元素。
7）啟用css偽類（例如：:hover）。
8）設定style屬性
9）現代瀏覽器大多都是通過佇列機制來批量更新布局，瀏覽器會把修改操作放在佇列中，至少乙個瀏覽器重新整理（即16.6ms）才會清空佇列，但當你獲取布局資訊的時候，佇列中可能有會影響這些屬性或方法返回值的操作，即使沒有，瀏覽器也會強制清空佇列，觸發回流與重繪來確保返回正確的值。
offsettop、offsetleft、offsetwidth、offsetheight
scrolltop、scrollleft、scrollwidth、scrollheight
clienttop、clientleft、clientwidth、clientheight
width、height
getcomputedstyle()
getboundingclientrect()
由於瀏覽器使用流式布局，對render tree的計算通常只需要遍歷一次就可以完成，但table及其內部元素除外，他們可能需要多次計算，通常要花3倍於同等元素的時間，這也是為什麼要避免使用table布局的原因之一。
重繪（repainting）在第7步，將元素渲染到頁面上，如果元素的樣式（color，background等）改變是，不會觸發第6步重新計算各個元素的位置大小等，只需要重新渲染頁面就可以，因此開銷要比重排小的多。
參考資料：
瀏覽器渲染頁面過程
今天在某論壇上看到這麼乙個問題。現在頁面有個空div，我用js向裡面插入一段html,然後獲取div的高度，發現有時候得到的div的高度不準確，請問各位有什麼方法解決一下。那麼為了更好的理解這個問題，咱們今天來聊聊瀏覽器的渲染過程 解析html 解析css 構建render tree 布局 layo...
瀏覽器渲染頁面過程
一 瀏覽器載入和渲染html的順序 二 js的載入 3 因為瀏覽器的載入是從上到下一行一行的載入的，所以如果頁面同事定義了兩個相同命名的js函式，後面的函式會覆蓋前面的函式。三 html頁面載入和解析流程 四 domcontentloaded事件 domcontentloaded事件在許多webki...
瀏覽器渲染頁面過程
簡單點來說就是建立了dom以後，還未完全渲染，就去獲取dom的高度，顯然是會出問題的。如下，可找個自行體會 123456789 那麼為了更好的理解這個問題，咱們今天來聊聊瀏覽器的渲染過程 解析html 解析css 構建render tree 布局 layout 繪製 painting 1.解析htm...