瀏覽器渲染原理及流程
渲染主流程
渲染引擎首先經過網絡得到所請求文檔的內容，一般以8K分塊的方式完成。下面是渲染引擎在取得內容以後的基本流程：html
解析html以構建dom樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹
這裏先解釋一下幾個概念，方便你們理解：後端
DOM Tree：瀏覽器將HTML解析成樹形的數據結構。瀏覽器
CSS Rule Tree：瀏覽器將CSS解析成樹形的數據結構。網絡
Render Tree: DOM和CSSOM合併後生成Render Tree。數據結構
layout: 有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關係，從而去計算出每一個節點在屏幕中的位置。dom
painting: 按照算出來的規則，經過顯卡，把內容畫到屏幕上。異步
reflow（迴流）：當瀏覽器發現某個部分發生了點變化影響了佈局，須要倒回去從新渲染，內行稱這個回退的過程叫 reflow。reflow 會從 <html> 這個 root frame 開始遞歸往下，依次計算全部的結點幾何尺寸和位置。reflow 幾乎是沒法避免的。如今界面上流行的一些效果，好比樹狀目錄的摺疊、展開（實質上是元素的顯 示與隱藏）等，都將引發瀏覽器的 reflow。鼠標滑過、點擊……只要這些行爲引發了頁面上某些元素的佔位面積、定位方式、邊距等屬性的變化，都會引發它內部、周圍甚至整個頁面的從新渲 染。一般咱們都沒法預估瀏覽器到底會 reflow 哪一部分的代碼，它們都彼此相互影響着。佈局
repaint（重繪）：改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性時，屏幕的一部分要重畫，可是元素的幾何尺寸沒有變。字體
注意：
(1)display:none 的節點不會被加入Render Tree，而visibility: hidden 則會，因此，若是某個節點最開始是不顯示的，設爲display:none是更優的。htm
(2)display:none 會觸發 reflow，而 visibility:hidden 只會觸發 repaint，由於沒有發現位置變化。
(3)有些狀況下，好比修改了元素的樣式，瀏覽器並不會馬上reflow 或 repaint 一次，而是會把這樣的操做積攢一批，而後作一次 reflow，這又叫異步 reflow 或增量異步 reflow。可是在有些狀況下，好比resize 窗口，改變了頁面默認的字體等。對於這些操做，瀏覽器會立刻進行 reflow。
儘管Webkit與Gecko使用略微不一樣的術語，這個過程仍是基本相同的
- 瀏覽器會將HTML解析成一個DOM樹，DOM 樹的構建過程是一個深度遍歷過程：當前節點的全部子節點都構建好後纔會去構建當前節點的下一個兄弟節點。
- 將CSS解析成 CSS Rule Tree 。
- 根據DOM樹和CSSOM來構造 Rendering Tree。注意：Rendering Tree 渲染樹並不等同於 DOM 樹，由於一些像Header或display:none的東西就不必放在渲染樹中了。
- 有了Render Tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的CSS定義以及他們的從屬關係。下一步操做稱之爲layout，顧名思義就是計算出每一個節點在屏幕中的位置。
- 再下一步就是繪製，即遍歷render樹，並使用UI後端層繪製每一個節點。
注意：上述這個過程是逐步完成的，爲了更好的用戶體驗，渲染引擎將會盡量早的將內容呈現到屏幕上，並不會等到全部的html都解析完成以後再去構建和佈局render樹。它是解析完一部份內容就顯示一部份內容，同時，可能還在經過網絡下載其他內容。
-
每一个你不满意的现在，都有一个你没有努力的曾经。