這裡的過程從伺服器返回html文件開始，瀏覽器請求伺服器的過程不多做介紹。
解析html和構建dom是同時執行的，當瀏覽器收到html文件時，瀏覽器通過html直譯器解析html和構建dom樹。瀏覽器採用的是自上而下解析。所以在構建dom樹時兩個標籤會阻塞解析，就是會涉及到外部資源的link和script標籤。例如:當解析到link標籤載入這個link標籤的外部資源，載入完構建好link以後才會繼續往下解析。預設為同步阻塞，link標籤有個async屬性，例如當加了async屬性，外部資源的載入和構建dom就是非同步，這時候沒有阻塞(這裡是通過個人chrome測試得出，可能和其他結果有些出入，望指正)。
dom樹已經構建完成，構建呈現樹（rendertree）將css樣式附著到dom樹上，瀏覽器的css直譯器解釋css樣式表，計算大小和位置資訊等，但這時這些資訊並沒有實際應用，相當於計算好後的資訊放在記憶體並沒有使用。
將計算後的大小和位置資訊實裝到dom節點中，但是這時候並沒有完成所有的工作。這裡會涉及到回流和重繪。
布局完成後，就是將呈現樹顯示到瀏覽器上，就是繪製，比如背景顏色，字型顏色等。
當rendertree的某部分或者全部的幾何屬性(width,height,margin…)或位置資訊需要改變，重新構建時會發生回流。
當元素的某個屬性需要發生變化(比如backgrou-color,color)重新渲染時會發生重繪。
var style = document.body
.style
; style.margin = "2px"
; // 回流和重繪
style.padding = "1px"
; //回流和重繪
style.color = "blue"
; // 再一次重繪
style.backgroundcolor = "#ccc"
; //重繪
var div=document.createelement("div");
div.innertext="如果有一天我成了罪人"
; // 新增node回流+重繪
document.body
html渲染過程
dom document object model 瀏覽器將html解析成樹形的資料結構，簡稱dom cssom css object model，瀏覽器將css 解析成樹形的資料結構 dom和cssom都是以bytes characters nodes object model 這樣的方式生成最終...
html渲染過程
直到外部資本載入並解析或履行結束後才會繼續向下解析html。關於款式與指令碼的先後順序相同也會影響到瀏覽器的解析程序，究其原因首要在於 script指令碼履行程序中可能會修改html介面 如document.write函式 dom節點的css款式會影響js的履行成果。在我的測驗中得到以下四條結論 1...
HTML渲染過程詳解
無意中看到寒冬關於前端的九個問題，細細想來我也只是對第 一 二 九問有所了解，正好也趁著這個機會梳理一下自己的知識體系。由於本人對http協議以及dns對url的解析問題並不了解，所以這裡之 url請求載入到瀏覽器端時，瀏覽器對html的解析到呈現過程，後來經過幾位道友分享，整理了一下url解析的過...