用戶在使用瀏覽器訪問一個網(wǎng)站時需要先通過HTTP協(xié)議向服務(wù)器發(fā)送請求潭千，之后服務(wù)器返回HTML文件與響應(yīng)信息。這時柏卤，瀏覽器會根據(jù)HTML文件來進(jìn)行解析與渲染（該階段還包括向服務(wù)器請求非內(nèi)聯(lián)的CSS文件與JavaScript文件或者其他資源），最終再將頁面呈現(xiàn)在用戶面前。
其中網(wǎng)頁的渲染都是由瀏覽器完成的忿墅，那么如果一個網(wǎng)站的頁面加載速度太慢會導(dǎo)致用戶體驗不夠友好，通過詳解瀏覽器渲染頁面的過程來引入一些基本的瀏覽器性能優(yōu)化方案沮峡，讓瀏覽器更快地渲染你的網(wǎng)頁并快速響應(yīng)從而提高用戶體驗疚脐。
關(guān)鍵渲染路徑
瀏覽器接收到服務(wù)器返回的HTML、CSS和Javascript字節(jié)數(shù)據(jù)并對其進(jìn)行解析和轉(zhuǎn)變成像素的渲染過程稱為關(guān)鍵渲染路徑邢疙。包括以下步驟：
- 解析HTML棍弄，生成DOM樹（DOM）
- 解析CSS，生成CSSOM樹（CSSOM）
- 將DOM和CSSOM合并疟游，生成渲染樹（Render-Tree）
- 計算渲染樹的布局（Layout）
- 將布局渲染到屏幕上（Paint）
通過優(yōu)化關(guān)鍵渲染路徑即可以縮短瀏覽器渲染頁面的時間呼畸。
構(gòu)建DOM樹與CSSOM樹
瀏覽器在渲染頁面前需要先構(gòu)建出DOM樹和CSSOM樹（如果沒有DOM樹和CSSOM樹就無法確定頁面的結(jié)構(gòu)與樣式，所以這兩項是必須先構(gòu)建出來的）颁虐。
DOM樹
全稱為Document Object Model文檔對象模型蛮原，它是HTML和XML文檔的編程接口，提供了對文檔的結(jié)構(gòu)化表示另绩，并定義了一種可以使程序?qū)υ摻Y(jié)構(gòu)進(jìn)行訪問的方式儒陨。
比如JavaScript就是通過DOM來操作結(jié)構(gòu)花嘶、樣式和內(nèi)容。DOM將文檔解析為一個由節(jié)點和對象組成的集合蹦漠，可以說一個WEB頁面其實就是一個DOM椭员。
DOM構(gòu)建過程
瀏覽器從網(wǎng)絡(luò)或者硬盤中獲取HTML字節(jié)數(shù)據(jù)后會經(jīng)過一個流程將字節(jié)解析成DOM樹，流程如下：
編碼：先將
HTML的原始字節(jié)數(shù)據(jù)轉(zhuǎn)換為文件指定編碼的字符笛园；-
令牌化：然后瀏覽器會根據(jù)
HTML規(guī)范來將字符串轉(zhuǎn)換成各種令牌隘击；如
<html>、<body>這樣的標(biāo)簽以及標(biāo)簽中的字符串和屬性等都會被轉(zhuǎn)化為令牌研铆，每個令牌具有特殊含義的一組規(guī)則埋同。令牌記錄了標(biāo)簽的開始與結(jié)束，通過這個特性可以輕松判斷一個標(biāo)簽是否為子標(biāo)簽（假設(shè)有
<html>與<body>兩個標(biāo)簽蚜印，當(dāng)<html>標(biāo)簽的令牌還沒遇到它的結(jié)束令牌</html>就遇見了<body>標(biāo)簽令牌莺禁，那么<body>就是<html>的子標(biāo)簽）。 生成對象：接下來每個令牌都會被轉(zhuǎn)換成定義其屬性和規(guī)則的對象窄赋，這個對象就是節(jié)點對象哟冬；
-
構(gòu)建完成：
DOM樹構(gòu)建完成，整個對象集合就像是一棵樹形結(jié)構(gòu)忆绰。為什么
DOM是一個樹形結(jié)構(gòu)浩峡？這是因為標(biāo)簽之間含有復(fù)雜的父子關(guān)系，樹形結(jié)構(gòu)正好可以詮釋這個關(guān)系错敢，同理CSSOM也是樹形結(jié)構(gòu)翰灾，層疊樣式也含有父子關(guān)系。例如：div p { font-size： 18px }會先尋找所有
p標(biāo)簽并判斷它的父標(biāo)簽是否為div之后才會決定要不要采用這個樣式進(jìn)行渲染稚茅。
整個DOM樹的構(gòu)建過程其實就是：
字節(jié)->字符->令牌->節(jié)點對象->對象模型
在解析DOM過程中纸淮，會碰到幾類特殊的節(jié)點需要特殊處理：
<style>、<link>標(biāo)簽以及具有內(nèi)聯(lián)樣式的標(biāo)簽亚享，交給CSSOM生成咽块；-
<script>標(biāo)簽。Javascript可以操作修改DOM結(jié)構(gòu)欺税，可以操作CSSOM修改節(jié)點樣式侈沪，就會導(dǎo)致了瀏覽器在解析DOM時候，一碰到<script>就會停止DOM的解析（CSS不會）晚凿，執(zhí)行完Javascript再返還控制權(quán)亭罪。事實上，
Javascript執(zhí)行前不僅僅是停止了DOM的解析歼秽，它還必須等待CSS的解析完成应役。當(dāng)瀏覽器碰到<script>標(biāo)簽時，發(fā)現(xiàn)該元素前面的CSS還未解析完成，就會等它解析完成再去執(zhí)行箩祥。Javascript阻塞了DOM的解析呻惕，也阻塞了其后的CSS解析，整個解析進(jìn)程必須等待Javascript的完成才能夠繼續(xù)滥比，這就是JS阻塞頁面。一個<script>標(biāo)簽推遲了DOM做院、CSSOM的生成以及以后的所有渲染過程盲泛，從性能角度上看，將<script>放在頁面底部键耕，也就合情合理了寺滚。
CSSOM樹
全稱為Cascading Style Sheets Object Model層疊樣式表對象模型，它與DOM樹的含義相差不大屈雄，只不過他是CSS的對象集合村视。
CSSOM和DOM是兩個獨立的數(shù)據(jù)結(jié)構(gòu)。
瀏覽器解析DOM的時候酒奶，遇到了<style>和內(nèi)聯(lián)樣式時候蚁孔，會根據(jù)樣式的聲明生成CSSOM，因為他們本身含有樣式內(nèi)容惋嚎。
而遇到了<link>標(biāo)簽時杠氢，瀏覽器會首先發(fā)送請求，待請求成功獲取外聯(lián)樣式后另伍，便會解析該外聯(lián)樣式鼻百，并就會像生成DOM樹一樣生成相應(yīng)的CSSOM樹。
由于CSSOM負(fù)責(zé)儲存渲染信息摆尝，瀏覽器就必須保證再合成渲染樹之前温艇，CSSOM是完備的，這種完備是指所有的CSS(內(nèi)聯(lián)堕汞、內(nèi)部勺爱、外部)都已經(jīng)下載完，并解析完臼朗，只有DOM和CSSOM解析完全結(jié)束邻寿，瀏覽器才會進(jìn)入下一步的渲染，這就是傳說中的CSS阻塞渲染视哑。
CSS阻塞渲染意味著绣否，在CSSOM完備前，頁面將一直處理白屏狀態(tài)挡毅，這就是為什么樣式放在<head>標(biāo)簽中蒜撮，僅僅是為了更快的解析CSS，保證更快的首次渲染。
需要注意的是段磨，即使沒有編寫任何樣式聲明取逾，
CSSOM依然會生成，默認(rèn)生成的CSSOM是瀏覽器自帶默認(rèn)樣式苹支。
構(gòu)建渲染樹
在構(gòu)建了DOM和CSSOM樹之后砾隅，瀏覽器只是擁有了兩個獨立的對象集合，DOM樹描述了文檔的結(jié)構(gòu)與內(nèi)容债蜜，CSSOM樹描述了對文檔應(yīng)用的樣式規(guī)則晴埂，想要渲染出頁面，就需要將DOM樹和CSSOM樹結(jié)合在一起寻定，生成渲染樹儒洛。這顆樹就包含了頁面所有可見元素及其渲染信息。
- 瀏覽器會先從
DOM樹的根節(jié)點開始遍歷每個可見節(jié)點狼速；<script>琅锻、<link>、<meta>都屬于不可視節(jié)點向胡，另外恼蓬，display: none的節(jié)點也屬于不可視節(jié)點，沒必要渲染在頁面上捷枯，值得注意的是visibility: hidden屬性并不算是不可見屬性滚秩，它的語義是隱藏元素，但元素仍然占據(jù)著局部空間淮捆，所以會被渲染成一個空框郁油。 - 從
CSSOM中適配可視節(jié)點的樣式規(guī)則； - 計算這些樣式攀痊，將計算值應(yīng)用到可視節(jié)點上桐腌；
- 渲染樹構(gòu)建完成，每個節(jié)點都是可見節(jié)點并且都含有其內(nèi)容和對應(yīng)規(guī)則的樣式苟径。
計算布局
渲染樹構(gòu)建完畢后案站，瀏覽器得到了每個可視節(jié)點的內(nèi)容與其樣式，下一步則需要計算每個節(jié)點在窗口內(nèi)的確切位置與大小棘街， 也就是布局階段蟆盐。
CSS采用了一種叫做盒子模型的思維模型來表示每個節(jié)點與其他元素之間的距離，盒子模型包括外邊距Margin遭殉、內(nèi)邊距Padding石挂、邊框Border、內(nèi)容Content险污。頁面中的每個標(biāo)簽其實都是一個個盒子痹愚。
布局階段會從渲染樹的根節(jié)點開始遍歷富岳，然后確定每個節(jié)點對象在頁面上的確切大小與位置，布局階段的輸出是一個盒子模型拯腮，它會精確地捕獲每個元素在屏幕內(nèi)的確切位置與大小窖式，所有相對的測量值也都會被轉(zhuǎn)換為屏幕內(nèi)的絕對像素值。
渲染
得到了渲染樹及其節(jié)點的布局信息动壤，瀏覽器便可以將最終的頁面渲染到屏幕萝喘。
渲染阻塞的優(yōu)化方案
瀏覽器想要渲染一個頁面就必須先構(gòu)建出DOM樹和CSSOM樹，如果HTML和CSS文件結(jié)構(gòu)非常龐大與復(fù)雜琼懊，這顯然會給頁面加載速度帶來嚴(yán)重影響蜒灰。
所謂渲染阻塞資源，即是對該資源發(fā)送請求后還需要先構(gòu)建對應(yīng)的DOM樹或CSSOM樹肩碟，這種行為顯然會延遲渲染操作的開始時間。HTML凸椿、CSS削祈、JavaScript都是會對渲染產(chǎn)生阻塞的資源，HTML是必需的脑漫，但還可以從CSS與JavaScript著手優(yōu)化髓抑，盡可能地減少阻塞的產(chǎn)生。
優(yōu)化CSS
如果可以讓CSS資源只在特定的條件下使用优幸，可以在首次加載時先不進(jìn)行構(gòu)建CSSOM樹吨拍，只有在特定條件下，才會讓瀏覽器進(jìn)行阻塞渲染然后構(gòu)建CSSOM网杆。
比如：
CSS的媒體查詢用來實現(xiàn)某些功能或者場景的羹饰，它由媒體類型以及零個或多個檢查特定媒體特征狀況的表達(dá)式組成。
<!-- 沒有使用媒體查詢碳却，這個css資源會阻塞渲染 -->
<link href="style.css" rel="stylesheet">
<!-- all是默認(rèn)類型队秩，它和不設(shè)置媒體查詢的效果是一樣的 -->
<link href="style.css" rel="stylesheet" media="all">
<!-- 動態(tài)媒體查詢， 將在網(wǎng)頁加載時計算昼浦。
根據(jù)網(wǎng)頁加載時設(shè)備的方向馍资，portrait.css 可能阻塞渲染，也可能不阻塞渲染关噪。-->
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<!-- 只在打印網(wǎng)頁時應(yīng)用鸟蟹，因此網(wǎng)頁首次在瀏覽器中加載時，它不會阻塞渲染使兔。 -->
<link href="print.css" rel="stylesheet" media="print">
使用媒體查詢可以讓
CSS資源不在首次加載中阻塞渲染建钥，但不管是哪種CSS資源它們的下載請求都不會被忽略，瀏覽器仍然會先下載CSS文件
優(yōu)化Javascript
當(dāng)瀏覽器的HTML解析器遇到一個<script>標(biāo)記時會暫停構(gòu)建DOM火诸，然后將控制權(quán)移交至JavaScript引擎锦针，這時引擎會開始執(zhí)行JavaScript腳本，直到執(zhí)行結(jié)束后，瀏覽器才會從之前中斷的地方恢復(fù)奈搜，然后繼續(xù)構(gòu)建DOM悉盆。每次去執(zhí)行JavaScript腳本都會嚴(yán)重地阻塞DOM樹的構(gòu)建，如果JavaScript腳本還操作了CSSOM馋吗，而正好這個CSSOM還沒有下載和構(gòu)建焕盟，瀏覽器甚至?xí)舆t腳本執(zhí)行和構(gòu)建DOM，直至完成其CSSOM的下載和構(gòu)建宏粤。
使用async可以通知瀏覽器該腳本不需要在引用位置執(zhí)行脚翘，這樣瀏覽器就可以繼續(xù)構(gòu)建DOM，JavaScript腳本會在就緒后開始執(zhí)行绍哎，這樣將顯著提升頁面首次加載的性能来农。
<!-- 下面2個用法效果是等價的 -->
<script type="text/javascript" src="demo_async.js" async="async"></script>
<script type="text/javascript" src="demo_async.js" async></script>
優(yōu)化關(guān)鍵渲染路徑
優(yōu)化關(guān)鍵渲染路徑就是在對關(guān)鍵資源、關(guān)鍵路徑長度和關(guān)鍵字節(jié)進(jìn)行優(yōu)化崇堰。關(guān)鍵資源越少沃于，瀏覽器在渲染前的準(zhǔn)備工作就越少；同樣海诲，關(guān)鍵路徑長度和關(guān)鍵字節(jié)關(guān)系到瀏覽器下載資源的效率繁莹，它們越少，瀏覽器下載資源的速度就越快特幔。
加載部分HTML
服務(wù)端在接收到請求時先只響應(yīng)回HTML的初始部分咨演，后續(xù)的HTML內(nèi)容在需要時再通過AJAX獲得。由于服務(wù)端只發(fā)送了部分HTML文件蚯斯，這讓構(gòu)建DOM樹的工作量減少很多薄风，從而讓用戶感覺頁面的加載速度很快。
注意拍嵌，這個方法不能用在
CSS上村刨，瀏覽器不允許CSSOM只構(gòu)建初始部分，否則會無法確定具體的樣式撰茎。
壓縮
通過對外部資源進(jìn)行壓縮可以大幅度地減少瀏覽器需要下載的資源量嵌牺，它會減少關(guān)鍵路徑長度與關(guān)鍵字節(jié)，使頁面的加載速度變得更快龄糊。
對數(shù)據(jù)進(jìn)行壓縮其實就是使用更少的位數(shù)來對數(shù)據(jù)進(jìn)行重編碼逆粹。
在對HTML、CSS和JavaScript這些文件進(jìn)行壓縮之前炫惩，還需要先進(jìn)行一次冗余壓縮僻弹。所謂冗余壓縮，就是去除多余的字符他嚷，例如注釋蹋绽、空格符和換行符芭毙。這些字符對于程序員是有用的，畢竟沒有格式化的代碼可讀性是非承对牛恐怖的退敦，但它們對于瀏覽器是沒有任何意義的，去除這些冗余可以減少文件的數(shù)據(jù)量蚣抗。在進(jìn)行完冗余壓縮之后侈百，再使用壓縮算法進(jìn)一步對數(shù)據(jù)本身進(jìn)行壓縮，例如GZIP（GZIP是一個可以作用于任何字節(jié)流的通用壓縮算法翰铡，它會記憶之前已經(jīng)看到的內(nèi)容钝域，然后再嘗試查找并替換重復(fù)的內(nèi)容。）锭魔。
HTTP緩存
通過網(wǎng)絡(luò)來獲取資源通常是緩慢的例证，如果資源文件過于膨大，瀏覽器還需要與服務(wù)器之間進(jìn)行多次往返通信才能獲得完整的資源文件迷捧。緩存可以復(fù)用之前獲取的資源战虏，既然后端可以使用緩存來減少訪問數(shù)據(jù)庫的開銷，那前端自然也可以使用緩存來復(fù)用資源文件党涕。
資源預(yù)加載
Pre-fetching是一種提示瀏覽器預(yù)先加載用戶之后可能會使用到的資源的方法。
使用dns-prefetch來提前進(jìn)行DNS解析巡社，以便之后可以快速地訪問另一個主機名（瀏覽器會在加載網(wǎng)頁時對網(wǎng)頁中的域名進(jìn)行解析緩存膛堤，這樣你在之后的訪問時無需進(jìn)行額外的DNS解析，減少了用戶等待時間晌该，提高了頁面加載速度）肥荔。
<link rel="dns-prefetch" href="other.hostname.com">
使用prefetch屬性可以預(yù)先下載資源，不過它的優(yōu)先級是最低的朝群。
<link rel="prefetch" href="/some_other_resource.jpeg">
Chrome允許使用subresource屬性指定優(yōu)先級最高的下載資源（當(dāng)所有屬性為subresource的資源下載完完畢后燕耿，才會開始下載屬性為prefetch的資源）。
<link rel="subresource" href="/some_other_resource.js">
prerender可以預(yù)先渲染好頁面并隱藏起來姜胖，之后打開這個頁面會跳過渲染階段直接呈現(xiàn)在用戶面前（推薦對用戶接下來必須訪問的頁面進(jìn)行預(yù)渲染誉帅，否則得不償失）。
<link rel="prerender" >
參考文獻(xiàn)
Web Fundamentals | Google Developers
