瀏覽器渲染流程及優化方案

渲染流程

第一大步驟：網絡通訊

 用戶輸入網址（www.baidu.com) => DNS域名解析=> 發起TCP三次握手=> 瀏覽器發出http請求  => 服務器響應http請求，把文件中的內容/代碼返回給瀏覽器

第二大步驟：頁面渲染

 解析HTML文件，獲得DOM樹和CSS樣式樹 => 將DOM樹和CSS樣式樹"整合"成渲染樹=> 經過已知的HTML標籤和他對應的樣式去計算佈局=> 將計算好的渲染樹渲染到顯示器上

其餘步驟：頁面重繪和頁面重排

這兩個步驟是很難避免的，只要涉及到dom的動態操做，都會致使頁面重繪或者重排，頁面重繪通常是由顏色變化致使的，而頁面重排則是因爲部分元素尺寸，定位變化致使的。所以對於須要操做定位或者大小的元素，儘可能使其脫離文檔流，防止其關聯元素的定位甚至致使全局的定位重排。

請不要以爲瀏覽器是按照上面的步驟一步步的執行下來獲得最終顯示屏上的頁面的，頁面的渲染過程並非徹底獨立的，因此你能夠常常看到頁面一點點出來的狀況就是一邊解析，一邊加載，一邊渲染的工做現象。

頁面優化方案

1.防止css的過多嵌套，合理的css選擇器能夠避免這個問題。這裏多提一句，如今新出的CSS解析器，如LESS,SASS,STYLES基本都是經過嵌套來寫CSS，因此不知道他裏面是怎麼優化這個問題的。

2.減小http的請求次數，將資源文件如（圖片）進行整合，將其餘文件經過打包工具打包。（爲何要這樣作呢？由於加載兩張50K的圖片的速度沒有加載一張100K的圖片快，這是因爲加載一張圖片不須要切換工做，省下了部分切換工做時所須要的時間）

3.減小dom操做，讓常常須要改動的節點脫離文檔流

 

4.使用json格式進行數據交換，json格式是JavaScript的原生格式，所以使用的過程當中不須要藉助額外的工具包

5.解決阻塞渲染，優先加載HTML再解析js