dom：document object model ，瀏覽器將html解析成樹形的資料結構，簡稱dom
cssom: css object model，瀏覽器將css**解析成樹形的資料結構
dom和cssom都是以bytes → characters → nodes → object model 這樣的方式生成最終的資料（如下圖）。並且dom樹的構建過程是乙個深度遍歷過程：當前節點的所有子節點都構建好後才會構建當前節點的下乙個兄弟節點。
render tree：dom和cssom合併後生成render tree。和dom一樣，以多叉樹的形式儲存每個節點。（display:none的節點不會加入render tree，而visibility:hidden會，所以，如果某個節點最開始是不顯示的，設為display:none是更好的）
repaint：重繪。如果只是改變了某個元素的背景顏色、文字顏色等，不影響元素周圍或內部布局的屬性，將只會引起瀏覽器的重繪，重畫某一部分。
reflow：回流，瀏覽器發現某個部分發生了變化影響了布局，就需要倒回去重新渲染。回流比重繪更花費時間，也就更影響效能，所以在寫**的時候，盡量避免過多的回流。
painting：按照計算出的規則，通過顯示卡，把內容畫到螢幕上
前三個步驟可能在第一次painting之後又被更新，比如js修改了dom或css屬性。
瀏覽器傳送request就會一直等待該request的返回。因為瀏覽器需要乙個穩定的dom樹結構
HTML渲染過程
這裡的過程從伺服器返回html文件開始，瀏覽器請求伺服器的過程不多做介紹。解析html和構建dom是同時執行的，當瀏覽器收到html文件時，瀏覽器通過html直譯器解析html和構建dom樹。瀏覽器採用的是自上而下解析。所以在構建dom樹時兩個標籤會阻塞解析，就是會涉及到外部資源的link和scri...
html渲染過程
直到外部資本載入並解析或履行結束後才會繼續向下解析html。關於款式與指令碼的先後順序相同也會影響到瀏覽器的解析程序，究其原因首要在於 script指令碼履行程序中可能會修改html介面 如document.write函式 dom節點的css款式會影響js的履行成果。在我的測驗中得到以下四條結論 1...
HTML渲染過程詳解
無意中看到寒冬關於前端的九個問題，細細想來我也只是對第 一 二 九問有所了解，正好也趁著這個機會梳理一下自己的知識體系。由於本人對http協議以及dns對url的解析問題並不了解，所以這裡之 url請求載入到瀏覽器端時，瀏覽器對html的解析到呈現過程，後來經過幾位道友分享，整理了一下url解析的過...