瀏覽器渲染
1、簡單地說，頁面渲染就是瀏覽器將html代碼根據CSS定義的規則顯示在瀏覽器窗口中的這個過程。先來大致了解一下瀏覽器都是怎麽工作的：
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>的到來，瀏覽器淚流滿面……
10. 等等，還沒完，用戶點了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下<link>標簽的CSS路徑；
11. 瀏覽器召集了在座的各位<div><span><ul><li>們，“大夥兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務器請
求了新的CSS文件，重新渲染頁面。
2、下面是渲染引擎在取得內容之後的基本流程：
解析html以構建dom樹 -> 構建render樹 -> 布局render樹 -> 繪制render樹
來看看webkit的主要流程：
再來看看Geoko的主要流程：
註意：(1)display:none 的節點不會被加入Render Tree，而visibility: hidden 則會，所以，如果某個節點最開始是不顯示的，設為display:none是更優的。
(2)display:none 會觸發 reflow，而 visibility:hidden 只會觸發 repaint，因為沒有發現位置變化。
(3)有些情況下，比如修改了元素的樣式，瀏覽器並不會立刻reflow 或 repaint 一次，而是會把這樣的操作積攢一批，然後做一次 reflow，這又叫異步 reflow 或增量異步 reflow。但是在有些情況下，比如resize 窗口，改變了頁面默認的字體等。對於這些操作，瀏覽器會馬上進行 reflow。
3、當我們的瀏覽器獲得html文件後，會自上而下的加載，並在加載過程中進行解析和渲染。
加載說的就是獲取資源文件的過程，如果在加載的過程中，遇到外部css文件和圖片，瀏覽器會另外發出一個請求，來獲取css文件和相應的圖片，這個請求是異步的，並不會影響html文件。
但是如果遇到javascript文件，html文件會掛起渲染的線程，等待javascript加載完畢後，html文件再繼續渲染。
瀏覽器渲染