html加載和解析流程

以前查找資料瞭解了html的整個渲染過程，對於理解頁面加載幫助仍是蠻大的，下面我用visio把它畫成流程圖，便於直觀理解

好吧，竟然要150字才能發佈............

瀏覽器渲染過程

瀏覽器渲染分爲四步

　　一、首先獲取html，而後獲取dom樹

　　二、構建render樹

　　三、佈局render樹

　　四、繪製render樹

瀏覽器工做過程

一、輸入網址

二、瀏覽器查找域名IP地址

三、瀏覽器給Web服務器發送一個Http請求

四、網站服務的永久重定向響應

五、瀏覽器跟蹤重定向地址，從新發送一個獲取請求

六、服務器處理請求，返回響應

七、服務器返回一個html響應

八、瀏覽器開始顯示html內容

九、瀏覽器發送請求以獲取嵌入HTML中的對象，瀏覽器顯示HTML時，他會注意到須要獲取其餘地址內容的標籤。這時，瀏覽器會發送一個請求來從新獲取這些文件，這些文件就包括css/js/圖片等資源。這些和HTML讀取相似，因此瀏覽器都會在DNS中查找這些域名併發送請求獲取資源響應

 

 

渲染的時候，瀏覽器會解析這三個東西

一、HTML/SVG/XHTML，解析這三種文件會產生一個DOMTree

二、CSS，解析CSS會產生CSS規則樹

三、JavaScript腳本，主要經過DOM API和CSSDOM API來操做DOM Tree和CSS Rule Tree

 

注意：爲了更好的體驗，渲染引擎會盡量早地將內容呈現到屏幕上，並不會等到全部HTML都解析完成以後再去構建和佈局render樹，一邊渲染內容一邊下載資源。不明白的能夠再翻上去看下流程圖。