我們可能都知道瀏覽器含有一個渲染引擎创肥，用來渲染窗口所展示的內(nèi)容。默認情況下鄙信，渲染引擎可以顯示html瞪醋、xml文檔及圖片，它也可以借助插件（一種瀏覽器擴展）顯示其他類型數(shù)據(jù)装诡，例如使用PDF閱讀器插件，用于顯示PDF格式践盼。但是其具體的渲染原理和流程估計也有很多人都不知道或者不清楚吧鸦采。這些天研究了一下瀏覽器的渲染原理，有了些心得咕幻，在這里跟大家分享一下渔伯，這里只討論渲染引擎最主要的用途——顯示應用了CSS之后的html及圖片。
渲染引擎簡介
本文所討論的瀏覽器——Firefox肄程、Chrome和Safari是基于兩種渲染引擎構建的锣吼，F(xiàn)irefox使用Geoko——Mozilla自主研發(fā)的渲染引擎，Safari和Chrome都使用webkit蓝厌。
渲染主流程
渲染引擎首先通過網(wǎng)絡獲得所請求文檔的內(nèi)容玄叠，通常以8K分塊的方式完成。下面是渲染引擎在取得內(nèi)容之后的基本流程：
解析html以構建dom樹 -> 構建render樹 -> 布局render樹 -> 繪制render樹
這里先解釋一下幾個概念拓提，方便大家理解：
DOM Tree：瀏覽器將HTML解析成樹形的數(shù)據(jù)結構读恃。
CSS Rule Tree：瀏覽器將CSS解析成樹形的數(shù)據(jù)結構。
Render Tree: DOM和CSSOM合并后生成Render Tree。
layout: 有了Render Tree寺惫，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點疹吃、各個節(jié)點的CSS定義以及他們的從屬關系，從而去計算出每個節(jié)點在屏幕中的位置西雀。
painting: 按照算出來的規(guī)則萨驶，通過顯卡，把內(nèi)容畫到屏幕上艇肴。
reflow（回流）：當瀏覽器發(fā)現(xiàn)某個部分發(fā)生了點變化影響了布局腔呜，需要倒回去重新渲染，內(nèi)行稱這個回退的過程叫 reflow豆挽。reflow 會從 <html> 這個 root frame 開始遞歸往下育谬，依次計算所有的結點幾何尺寸和位置。reflow 幾乎是無法避免的“锕現(xiàn)在界面上流行的一些效果膛檀，比如樹狀目錄的折疊、展開（實質(zhì)上是元素的顯 示與隱藏）等娘侍，都將引起瀏覽器的 reflow咖刃。鼠標滑過、點擊……只要這些行為引起了頁面上某些元素的占位面積憾筏、定位方式嚎杨、邊距等屬性的變化，都會引起它內(nèi)部氧腰、周圍甚至整個頁面的重新渲 染枫浙。通常我們都無法預估瀏覽器到底會 reflow 哪一部分的代碼，它們都彼此相互影響著古拴。
repaint（重繪）：改變某個元素的背景色箩帚、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時黄痪，屏幕的一部分要重畫紧帕，但是元素的幾何尺寸沒有變。
注意：(1)display:none 的節(jié)點不會被加入Render Tree桅打，而visibility: hidden 則會是嗜，所以，如果某個節(jié)點最開始是不顯示的挺尾，設為display:none是更優(yōu)的鹅搪。
(2)display:none 會觸發(fā) reflow，而 visibility:hidden 只會觸發(fā) repaint潦嘶，因為沒有發(fā)現(xiàn)位置變化涩嚣。
(3)有些情況下崇众，比如修改了元素的樣式，瀏覽器并不會立刻reflow 或 repaint 一次航厚，而是會把這樣的操作積攢一批顷歌，然后做一次 reflow，這又叫異步 reflow 或增量異步 reflow幔睬。但是在有些情況下眯漩，比如resize 窗口，改變了頁面默認的字體等麻顶。對于這些操作赦抖，瀏覽器會馬上進行 reflow。
來看看webkit的主要流程：
再來看看Geoko的主要流程：
Gecko 里把格式化好的可視元素稱做“幀樹”（Frame tree）辅肾。每個元素就是一個幀（frame）队萤。 webkit 則使用”渲染樹”這個術語，渲染樹由”渲染對象”組成矫钓。webkit 里使用”layout”表示元素的布局要尔，Gecko則稱為”reflow”。Webkit使用”Attachment”來連接DOM節(jié)點與可視化信息以構建渲染樹新娜。一個非語義上的小差別是Gecko在HTML與DOM樹之間有一個附加的層 赵辕，稱作”content sink”，是創(chuàng)建DOM對象的工廠概龄。
盡管Webkit與Gecko使用略微不同的術語还惠，這個過程還是基本相同的，如下：
1. 瀏覽器會將HTML解析成一個DOM樹私杜，DOM 樹的構建過程是一個深度遍歷過程：當前節(jié)點的所有子節(jié)點都構建好后才會去構建當前節(jié)點的下一個兄弟節(jié)點蚕键。
2. 將CSS解析成 CSS Rule Tree 。
3. 根據(jù)DOM樹和CSSOM來構造 Rendering Tree衰粹。注意：Rendering Tree 渲染樹并不等同于 DOM 樹嚎幸，因為一些像Header或display:none的東西就沒必要放在渲染樹中了。
4. 有了Render Tree寄猩，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點、各個節(jié)點的CSS定義以及他們的從屬關系骑疆。下一步操作稱之為layout田篇，顧名思義就是計算出每個節(jié)點在屏幕中的位置。
5. 再下一步就是繪制箍铭，即遍歷render樹泊柬，并使用UI后端層繪制每個節(jié)點。
注意：上述這個過程是逐步完成的诈火，為了更好的用戶體驗兽赁，渲染引擎將會盡可能早的將內(nèi)容呈現(xiàn)到屏幕上，并不會等到所有的html都解析完成之后再去構建和布局render樹。它是解析完一部分內(nèi)容就顯示一部分內(nèi)容刀崖，同時惊科，可能還在通過網(wǎng)絡下載其余內(nèi)容。
