關於瀏覽器渲染HTML過程的我的理解

 

總體流程如上圖

首先是瀏覽器獲取到html文檔

1根據html生成dom樹而且併發執行css/js 圖片加載請求  

根據css生成cssdom樹

注意js加載會阻塞 加載玩後當即執行 有可能會修改dom樹和cssdom樹

2dom樹和cssdom樹生成完成後 組合成render 樹  

4.有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關係。下一步操做稱之爲Layout，顧名思義就是計算出每一個節點在屏幕中的位置。 

5.再下一步就是繪製，即遍歷render樹，並使用UI後端層繪製每一個節點。

　　上述這個過程是逐步完成的，爲了更好的用戶體驗，渲染引擎將會盡量早的將內容呈現到屏幕上，並不會等到全部的html都解析完成以後再去構建和佈局render樹。它是解析完一部份內容就顯示一部份內容，同時，可能還在經過網絡下載其他內容。（這段話是《how browsers work》裏面講的，讓我茅塞頓開）

 

幾個概念： 

（1）Reflow（迴流）：瀏覽器要花時間去渲染，當它發現了某個部分發生了變化影響了佈局，那就須要倒回去從新渲染。 

（2）Repaint（重繪）：若是隻是改變了某個元素的背景顏色，文字顏色等，不影響元素周圍或內部佈局的屬性，將只會引發瀏覽器的repaint，重畫某一部分。 

Reflow要比Repaint更花費時間，也就更影響性能。因此在寫代碼的時候，要儘可能避免過多的Reflow。

 

reflow的緣由：

 

（1）頁面初始化的時候； 

（2）操做DOM時； 

（3）某些元素的尺寸變了； 

 

參考：

http://www.tuicool.com/articles/vmu2Uvn

http://blog.csdn.net/xiaozhuxmen/article/details/52014901