瀏覽器的內(nèi)核中主要分為渲染引擎和 javascript 引擎，本篇主要圍繞渲染引擎介紹一下瀏覽器的工作原理孵运。
渲染引擎簡介
本文所討論的瀏覽器——Firefox螟够、Chrome和Safari是基于兩種渲染引擎構(gòu)建的彤断，F(xiàn)irefox使用Geoko——Mozilla自主研發(fā)的渲染引擎，Safari和Chrome都使用webkit逮刨。
渲染主流程
渲染引擎首先通過網(wǎng)絡(luò)獲得所請求文檔的內(nèi)容呕缭，通常以8K分塊的方式完成。下面是渲染引擎在取得內(nèi)容之后的基本流程：
解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹
這里先解釋一下幾個概念修己，方便大家理解：
DOM Tree：瀏覽器將HTML解析成樹形的數(shù)據(jù)結(jié)構(gòu)恢总。
CSS Rule Tree：瀏覽器將CSS解析成樹形的數(shù)據(jù)結(jié)構(gòu)。
Render Tree: DOM和CSSOM合并后生成Render Tree睬愤。
layout: 有了Render Tree片仿，瀏覽器已經(jīng)能知道網(wǎng)頁中有哪些節(jié)點、各個節(jié)點的CSS定義以及他們的從屬關(guān)系尤辱，從而去計算出每個節(jié)點在屏幕中的位置砂豌。
painting: 按照算出來的規(guī)則，通過顯卡光督，把內(nèi)容畫到屏幕上阳距。
reflow（回流）：當(dāng)瀏覽器發(fā)現(xiàn)某個部分發(fā)生了點變化影響了布局，需要倒回去重新渲染结借，內(nèi)行稱這個回退的過程叫 reflow筐摘。reflow 會從<html> 這個 root frame 開始遞歸往下，依次計算所有的結(jié)點幾何尺寸和位置船老。reflow 幾乎是無法避免的】欤現(xiàn)在界面上流行的一些效果，比如樹狀目錄的折疊柳畔、展開（實質(zhì)上是元素的顯 示與隱藏）等馍管，都將引起瀏覽器的 reflow。鼠標(biāo)滑過薪韩、點擊……只要這些行為引起了頁面上某些元素的占位面積确沸、定位方式、邊距等屬性的變化俘陷，都會引起它內(nèi)部罗捎、周圍甚至整個頁面的重新渲 染。通常我們都無法預(yù)估瀏覽器到底會 reflow 哪一部分的代碼岭洲，它們都彼此相互影響著。
repaint（重繪）：改變某個元素的背景色坎匿、文字顏色盾剩、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時雷激，屏幕的一部分要重畫，但是元素的幾何尺寸沒有變告私。
注意：
-
display:none的節(jié)點不會被加入Render Tree屎暇，而visibility: hidden則會，所以驻粟，如果某個節(jié)點最開始是不顯示的根悼，設(shè)為display:none是更優(yōu)的。 -
display:none會觸發(fā) reflow蜀撑，而visibility:hidden只會觸發(fā) repaint挤巡，因為沒有發(fā)現(xiàn)位置變化。 - 有些情況下酷麦，比如修改了元素的樣式矿卑，瀏覽器并不會立刻reflow 或 repaint 一次，而是會把這樣的操作積攢一批沃饶，然后做一次 reflow母廷，這又叫異步 reflow 或增量異步 reflow。但是在有些情況下糊肤，比如resize 窗口琴昆，改變了頁面默認的字體等。對于這些操作馆揉，瀏覽器會馬上進行 reflow业舍。
瀏覽器如何渲染網(wǎng)頁
要了解瀏覽器渲染頁面的過程，首先得知道一個名詞——關(guān)鍵渲染路徑把介。關(guān)鍵渲染路徑是指瀏覽器從最初接收請求來的HTML勤讽、CSS、javascript等資源拗踢，然后解析脚牍、構(gòu)建樹、渲染布局巢墅、繪制诸狭，最后呈現(xiàn)給用戶能看到的界面這整個過程。
用戶看到頁面實際上可以分為兩個階段：頁面內(nèi)容加載完成和頁面資源加載完成君纫，分別對應(yīng)于DOMContentLoaded和Load驯遇。
DOMContentLoaded事件觸發(fā)時，僅當(dāng)DOM加載完成蓄髓，不包括樣式表叉庐，圖片等
load事件觸發(fā)時，頁面上所有的DOM会喝，樣式表陡叠，腳本玩郊，圖片都已加載完成
瀏覽器渲染的過程主要包括以下五步：
- 瀏覽器將獲取的HTML文檔解析成DOM樹。
- 處理CSS標(biāo)記枉阵，構(gòu)成層疊樣式表模型CSSOM(CSS Object Model)译红。
- 將DOM和CSSOM合并為渲染樹(rendering tree)，代表一系列將被渲染的對象兴溜。
- 渲染樹的每個元素包含的內(nèi)容都是計算過的侦厚，它被稱之為布局layout。瀏覽器使用一種流式處理的方法拙徽，只需要一次繪制操作就可以布局所有的元素刨沦。
- 將渲染樹的各個節(jié)點繪制到屏幕上，這一步被稱為繪制painting斋攀。
需要注意的是已卷，以上五個步驟并不一定一次性順序完成，比如DOM或CSSOM被修改時淳蔼，亦或是哪個過程會重復(fù)執(zhí)行侧蘸，這樣才能計算出哪些像素需要在屏幕上進行重新渲染。而在實際情況中鹉梨，JavaScript和CSS的某些操作往往會多次修改DOM或者CSSOM讳癌。
來看看webkit的主要流程：
再來看看Geoko的主要流程：
Gecko 里把格式化好的可視元素稱做“幀樹”（Frame tree）。每個元素就是一個幀（frame）存皂。 webkit 則使用”渲染樹”這個術(shù)語晌坤，渲染樹由”渲染對象”組成。webkit 里使用”layout”表示元素的布局旦袋，Gecko則稱為”reflow”骤菠。Webkit使用”Attachment”來連接DOM節(jié)點與可視化信息以構(gòu)建渲染樹。一個非語義上的小差別是Gecko在HTML與DOM樹之間有一個附加的層 疤孕，稱作”content sink”商乎，是創(chuàng)建DOM對象的工廠。
瀏覽器渲染網(wǎng)頁的具體流程
構(gòu)建DOM樹
當(dāng)瀏覽器接收到服務(wù)器響應(yīng)來的HTML文檔后祭阀，會遍歷文檔節(jié)點鹉戚，生成DOM樹。
需要注意以下幾點：
- DOM樹在構(gòu)建的過程中可能會被CSS和JS的加載而執(zhí)行阻塞
-
display:none的元素也會在DOM樹中 -
注釋也會在DOM樹中 -
script標(biāo)簽會在DOM樹中
無論是DOM還是CSSOM专控，都是要經(jīng)過Bytes→characters→tokens→nodes→object model這個過程抹凳。
當(dāng)前節(jié)點的所有子節(jié)點都構(gòu)建好后才會去構(gòu)建當(dāng)前節(jié)點的下一個兄弟節(jié)點。
構(gòu)建CSSOM規(guī)則樹
瀏覽器解析CSS文件并生成CSSOM伦腐，每個CSS文件都被分析成一個StyleSheet對象赢底，每個對象都包含CSS規(guī)則。CSS規(guī)則對象包含對應(yīng)于CSS語法的選擇器和聲明對象以及其他對象。
在這個過程需要注意的是：
- CSS解析可以與DOM解析同時進行幸冻。
- CSS解析與script的執(zhí)行互斥 嗅剖。
- 在Webkit內(nèi)核中進行了script執(zhí)行優(yōu)化，只有在JS訪問CSS時才會發(fā)生互斥嘁扼。
構(gòu)建渲染樹（Render Tree）
通過DOM樹和CSS規(guī)則樹，瀏覽器就可以通過它兩構(gòu)建渲染樹了黔攒。瀏覽器會先從DOM樹的根節(jié)點開始遍歷每個可見節(jié)點趁啸，然后對每個可見節(jié)點找到適配的CSS樣式規(guī)則并應(yīng)用。
有以下幾點需要注意：
-
Render Tree和DOM Tree不完全對應(yīng) -
display: none的元素不在Render Tree中 -
visibility: hidden的元素在Render Tree中
渲染樹生成后督惰，還是沒有辦法渲染到屏幕上不傅，渲染到屏幕需要得到各個節(jié)點的位置信息，這就需要布局（Layout）的處理了赏胚。
渲染樹布局(layout of the render tree)
布局階段會從渲染樹的根節(jié)點開始遍歷访娶，由于渲染樹的每個節(jié)點都是一個Render Object對象，包含寬高觉阅，位置崖疤，背景色等樣式信息。所以瀏覽器就可以通過這些樣式信息來確定每個節(jié)點對象在頁面上的確切大小和位置典勇，布局階段的輸出就是我們常說的盒子模型劫哼，它會精確地捕獲每個元素在屏幕內(nèi)的確切位置與大小。需要注意的是：
- float元素割笙，absoulte元素权烧，fixed元素會發(fā)生位置偏移。
- 我們常說的脫離文檔流伤溉，其實就是脫離Render Tree般码。
渲染樹繪制（Painting the render tree）
在繪制階段，瀏覽器會遍歷渲染樹乱顾，調(diào)用渲染器的paint()方法在屏幕上顯示其內(nèi)容板祝。渲染樹的繪制工作是由瀏覽器的UI后端組件完成的。
以下是在網(wǎng)上找到的幾張圖糯耍，簡單解釋了 DOM 樹到 RenderLayer 樹最終的過程扔字。
這一段簡單的 HTML 代碼，其中包含的 body, div canvas script 等元素温技，通過 HTML革为，CSS 解析器進行解析，最終會生成一個 RenderLayer 樹舵鳞， 此時不再將所有層繪制到一起震檩，而是進行分層渲染，合成之后再顯示到屏幕上。
以下 RenderLayer 樹的結(jié)構(gòu)抛虏，從圖中可以看出整個樹分了 3 個 Layer博其，在 Layer 下面包含了 RenderBlock，RenderText 等 Render 節(jié)點迂猴，每個節(jié)點上都包含的坐標(biāo)慕淡，大小，以及背景顏色等渲染依賴的信息沸毁。
RenderBlock 其實就是我們 HTML 中的塊級元素峰髓，我們都知道一個元素是否為塊級元素是可以通過 CSS 改變的，所以息尺，一個 RenderLayer 樹的結(jié)構(gòu)也會根據(jù)CSS的變化變化携兵，如果影響到元素的位置發(fā)生變化會都在整個樹重新計算，也是就是我們說的回流搂誉。
瀏覽器渲染網(wǎng)頁的那些事兒
瀏覽器主要組件結(jié)構(gòu)
渲染引擎主要有兩個：
webkit和GeckoFirefox使用Geoko徐紧，Mozilla自主研發(fā)的渲染引擎。Safari和Chrome都使用webkit炭懊。Webkit是一款開源渲染引擎并级，它本來是為linux平臺研發(fā)的，后來由Apple移植到Mac及Windows上侮腹。
雖然主流瀏覽器渲染過程叫法有區(qū)別死遭，但是主要流程還是相同的。
渲染阻塞
JS可以操作DOM來修改DOM結(jié)構(gòu)凯旋，可以操作CSSOM來修改節(jié)點樣式呀潭，這就導(dǎo)致了瀏覽器在遇到<script>標(biāo)簽時，DOM構(gòu)建將暫停至非，直至腳本完成執(zhí)行钠署，然后繼續(xù)構(gòu)建DOM。如果腳本是外部的荒椭，會等待腳本下載完畢谐鼎，再繼續(xù)解析文檔。現(xiàn)在可以在script標(biāo)簽上增加屬性defer或者async趣惠。腳本解析會將腳本中改變DOM和CSS的地方分別解析出來狸棍，追加到DOM樹和CSSOM規(guī)則樹上。
每次去執(zhí)行JavaScript腳本都會嚴(yán)重地阻塞DOM樹的構(gòu)建味悄，如果JavaScript腳本還操作了CSSOM草戈，而正好這個CSSOM還沒有下載和構(gòu)建，瀏覽器甚至?xí)舆t腳本執(zhí)行和構(gòu)建DOM侍瑟，直至完成其CSSOM的下載和構(gòu)建唐片。所以丙猬，script標(biāo)簽的位置很重要。
JS阻塞了構(gòu)建DOM樹费韭，也阻塞了其后的構(gòu)建CSSOM規(guī)則樹茧球，整個解析進程必須等待JS的執(zhí)行完成才能夠繼續(xù)，這就是所謂的JS阻塞頁面星持。
由于CSSOM負責(zé)存儲渲染信息抢埋，瀏覽器就必須保證在合成渲染樹之前，CSSOM是完備的督暂，這種完備是指所有的CSS（內(nèi)聯(lián)羹令、內(nèi)部和外部）都已經(jīng)下載完，并解析完损痰，只有CSSOM和DOM的解析完全結(jié)束，瀏覽器才會進入下一步的渲染酒来，這就是CSS阻塞渲染卢未。
CSS阻塞渲染意味著，在CSSOM完備前堰汉，頁面將一直處理白屏狀態(tài)辽社，這就是為什么樣式放在head中，僅僅是為了更快的解析CSS翘鸭，保證更快的首次渲染滴铅。
需要注意的是，即便你沒有給頁面任何的樣式聲明就乓，CSSOM依然會生成汉匙，默認生成的CSSOM自帶瀏覽器默認樣式。
當(dāng)解析HTML的時候生蚁，會把新來的元素插入DOM樹里面噩翠，同時去查找CSS，然后把對應(yīng)的樣式規(guī)則應(yīng)用到元素上邦投，查找樣式表是按照從右到左的順序去匹配的伤锚。
例如：div p {font-size: 16px}，會先尋找所有p標(biāo)簽并判斷它的父標(biāo)簽是否為div之后才會決定要不要采用這個樣式進行渲染）志衣。
所以屯援，我們平時寫CSS時，盡量用id和class念脯，千萬不要過渡層疊狞洋。
回流和重繪（reflow和repaint）
我們都知道HTML默認是流式布局的，但CSS和JS會打破這種布局绿店，改變DOM的外觀樣式以及大小和位置徘铝。因此我們就需要知道兩個概念：replaint和reflow。
reflow（回流）
當(dāng)瀏覽器發(fā)現(xiàn)布局發(fā)生了變化，這個時候就需要倒回去重新渲染惕它，這個回退的過程叫reflow怕午。reflow會從html這個root frame開始遞歸往下，依次計算所有的結(jié)點幾何尺寸和位置淹魄，以確認是渲染樹的一部分發(fā)生變化還是整個渲染樹郁惜。reflow幾乎是無法避免的，因為只要用戶進行交互操作甲锡，就勢必會發(fā)生頁面的一部分的重新渲染兆蕉，且通常我們也無法預(yù)估瀏覽器到底會reflow哪一部分的代碼，因為他們會相互影響缤沦。
repaint（重繪）
repaint則是當(dāng)我們改變某個元素的背景色虎韵、文字顏色、邊框顏色等等不影響它周圍或內(nèi)部布局的屬性時缸废，屏幕的一部分要重畫包蓝，但是元素的幾何尺寸和位置沒有發(fā)生改變。
需要注意的是企量，display:none會觸發(fā)reflow测萎，而visibility: hidden屬性則并不算是不可見屬性，它的語義是隱藏元素届巩，但元素仍然占據(jù)著布局空間硅瞧，它會被渲染成一個空框。所以visibility:hidden只會觸發(fā)repaint恕汇，因為沒有發(fā)生位置變化腕唧。
另外有些情況下，比如修改了元素的樣式瘾英，瀏覽器并不會立刻reflow或repaint一次四苇，而是會把這樣的操作積攢一批，然后做一次reflow方咆，這又叫異步reflow或增量異步reflow月腋。但是在有些情況下，比如resize窗口瓣赂，改變了頁面默認的字體等榆骚。對于這些操作，瀏覽器會馬上進行reflow煌集。
引起reflow
現(xiàn)代瀏覽器會對回流做優(yōu)化妓肢，它會等到足夠數(shù)量的變化發(fā)生，再做一次批處理回流苫纤。
- 頁面第一次渲染（初始化）
- DOM樹變化（如：增刪節(jié)點）
- Render樹變化（如：padding改變）
- 瀏覽器窗口resize
- 獲取元素的某些屬性
瀏覽器為了獲得正確的值也會提前觸發(fā)回流碉钠，這樣就使得瀏覽器的優(yōu)化失效了祝高，這些屬性包括offsetLeft瓣蛀、offsetTop、offsetWidth、offsetHeight讲弄、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、調(diào)用了getComputedStyle()。
引起repaint
reflow回流必定引起repaint重繪，重繪可以單獨觸發(fā)样屠。
背景色、顏色傍衡、字體改變（注意：字體大小發(fā)生變化時倦畅，會觸發(fā)回流）
減少reflow、repaint觸發(fā)次數(shù)
- 用
transform做形變和位移可以減少reflow - 避免逐個修改節(jié)點樣式绣的，盡量一次性修改
- 使用
DocumentFragment將需要多次修改的DOM元素緩存叠赐，最后一次性append到真實DOM中渲染 - 可以將需要多次修改的DOM元素設(shè)置
display:none，操作完再顯示屡江。（因為隱藏元素不在render樹內(nèi)芭概，因此修改隱藏元素不會觸發(fā)回流重繪） - 避免多次讀取某些屬性
- 通過絕對位移將復(fù)雜的節(jié)點元素脫離文檔流，形成新的
Render Layer惩嘉，降低回流成本
幾條關(guān)于優(yōu)化渲染效率的建議
結(jié)合上文有以下幾點可以優(yōu)化渲染效率罢洲。
- 合法地去書寫HTML和CSS ，且不要忘了文檔編碼類型文黎。
- 樣式文件應(yīng)當(dāng)在head標(biāo)簽中惹苗，而腳本文件在body結(jié)束前，這樣可以防止阻塞的方式耸峭。
- 簡化并優(yōu)化CSS選擇器桩蓉，盡量將嵌套層減少到最小。
- DOM 的多個讀操作（或多個寫操作）劳闹，應(yīng)該放在一起院究。不要兩個讀操作之間，加入一個寫操作本涕。
- 如果某個樣式是通過重排得到的儡首，那么最好緩存結(jié)果。避免下一次用到的時候偏友，瀏覽器又要重排蔬胯。
- 不要一條條地改變樣式，而要通過改變class位他，或者csstext屬性氛濒，一次性地改變樣式产场。
- 盡量用
transform來做形變和位移 - 盡量使用離線DOM，而不是真實的網(wǎng)頁DOM舞竿，來改變元素樣式京景。比如，操作Document Fragment對象骗奖，完成后再把這個對象加入DOM确徙。再比如，使用cloneNode()方法执桌，在克隆的節(jié)點上進行操作鄙皇，然后再用克隆的節(jié)點替換原始節(jié)點。
- 先將元素設(shè)為
display: none（需要1次重排和重繪）仰挣，然后對這個節(jié)點進行100次操作伴逸，最后再恢復(fù)顯示（需要1次重排和重繪）。這樣一來膘壶，你就用兩次重新渲染错蝴，取代了可能高達100次的重新渲染。 -
position屬性為absolute或fixed的元素颓芭，重排的開銷會比較小顷锰，因為不用考慮它對其他元素的影響。 - 只在必要的時候亡问，才將元素的display屬性為可見官紫，因為不可見的元素不影響重排和重繪。另外玛界，
visibility : hidden的元素只對重繪有影響万矾，不影響重排悼吱。 - 使用
window.requestAnimationFrame()慎框、window.requestIdleCallback()這兩個方法調(diào)節(jié)重新渲染。
