瀏覽器渲染頁面的過程

1、渲染引擎

　　瀏覽器的核心部分是渲染引擎，也稱爲瀏覽器的內核，負責對網頁語法（如HTML、CSS、JavaScript等）的解釋並顯示網頁。Firefox使用Geoko——Mozilla自主研發的渲染引擎，Safari和Chrome使用webkit內核。

2、webkit引擎渲染流程

　　1.渲染引擎首先經過網絡得到所請求文檔的內容；

　　2.解析html以構建dom樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹

注意：這個過程是逐步完成的，爲了更好的用戶體驗，渲染引擎儘量早的將內容呈現到屏幕上，並不會等到全部的html都解析完成以後再去構建和佈局渲染樹。它是解析一部份內容就顯示一部份內容，同時，可能還在經過網絡下載其他內容。

3、HTML頁面加載和解析流程
　　1. 用戶輸入網址（假設是個html頁面，而且是第一次訪問），瀏覽器向服務器發出請求，服務器返回html文件； 
　　2. 瀏覽器開始載入html代碼，發現＜head＞標籤內有一個＜link＞標籤引用外部CSS文件； 
　　3. 瀏覽器又發出CSS文件的請求，服務器返回這個CSS文件； 
　　4. 瀏覽器繼續載入html中＜body＞部分的代碼，而且CSS文件已經拿到手了，能夠開始渲染頁面了； 
　　5. 瀏覽器在代碼中發現一個＜img＞標籤引用了一張圖片，向服務器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染後面的代碼； 
　　6. 服務器返回圖片文件，因爲圖片佔用了必定面積，影響了後面段落的排布，所以瀏覽器須要回過頭來從新渲染這部分代碼； 
　　7. 瀏覽器發現了一個包含一行Javascript代碼的＜script＞標籤，趕快運行它； 
　　8. Javascript腳本執行了這條語句，它命令瀏覽器隱藏掉代碼中的某個＜div＞ （style.display=」none」）。忽然少了這麼一個元素，瀏覽器不得不從新渲染這部分代碼； 
　　9. 終於等到了＜/html＞的到來，瀏覽器淚流滿面…… 

4、須要注意的問題

1.渲染阻塞

當瀏覽器接收到服務器響應來的HTML文檔後，會遍歷文檔節點，生成DOM樹。須要注意的是，DOM樹的生成過程當中會被CSS和JS文件的下載執行阻塞。
當瀏覽器遇到一個 script 標記時，DOM 構建將暫停，直至腳本完成下載執行，而後繼續構建DOM。每次去執行JavaScript腳本都會嚴重地阻塞DOM樹的構建。因此，css和js文件的引入位置很重要。

　　第一：CSS 資源位於 head 標籤內優先引入。
　　第二：將全部的script標籤放到頁面底部，也就是body閉合標籤以前，這能確保在腳本執行前頁面已經完成了DOM樹渲染。且JavaScript 應儘可能少影響 DOM 的構建。

2.重排與重繪（reflow與repaint）

在繪製階段，遍歷渲染樹，調用渲染器的paint()方法在屏幕上顯示其內容。根據渲染樹佈局，計算CSS樣式，即每一個節點在頁面中的大小和位置等幾何信息。HTML默認是流式佈局的，CSS和js會打破這種佈局，改變DOM的外觀樣式以及大小和位置。這時就要提到兩個重要概念：重排與重繪。

　　重排：意味着元件的幾何尺寸變了，須要從新驗證並計算渲染樹。是渲染樹的一部分或所有發生了變化。

　　重繪：屏幕的一部分重畫，不影響總體佈局，好比某個CSS的背景色變了，但元素的幾何尺寸和位置不變。

儘可能減小重排與重繪。重排要比重繪更花費時間，也就更影響性能。因此在寫代碼的時候，要儘可能避免過多的重排。

　　引發重排的狀況

　　（1）頁面初始化時； 
　　（2）操做DOM時； 
　　（3）某些元素的尺寸改變； 
　　（4）CSS 的屬性發生變化。

　　減小重排/重繪

　　（1）不要一個個的修改 DOM 的樣式。應經過 class 來修改。 
　　（2）爲動畫的 HTML 元素使用 position: absoult，那麼修改它的 CSS 是不會重排的。 
　　（3）儘可能不要使用 table 佈局。可能很小的一個改動會形成整個 table 的重排。

3.減小DNS查詢（DNS-Domain Name Server 域名服務器）

　　(1) 合併並壓縮js；

　　(2) 合併並壓縮css；

　　(3) 合併並壓縮圖片；

4.編寫css時注意

Css選擇器是從右到左進行匹配的。例如.a li{}，找到全部的li，再去肯定它的上級元素是否是.a。

　　(1) Dom深度儘可能少，選擇器層級儘可能少；

　　(2) 減小inline javascript、css的數量；

　　(3) 避免後代選擇器，儘可能使用子選擇器。子選擇器(.a>b{})的機率要大於後代選擇器（.a b{}）。

　　(4) 避免使用通配符。例如.a *{}，首先匹配通配符(頁面上的全部元素)，而後向上尋找.a，這樣的性能消耗可想而知。