寫在前面
關于前端性能優(yōu)化的文章非常多，寫瀏覽器關鍵渲染路徑的也不少米丘，但總是感覺哪里錯了或者哪里疏忽了蚕甥，于是自己寫一篇，同時也是最近面試的一篇總結～
下面分別從瀏覽器渲染過程炕舵，文檔資源的加載與阻塞何之，關鍵渲染路徑及優(yōu)化等三個角度來看。
瀏覽器渲染過程
面試常被問到 “前端怎樣性能優(yōu)化”咽筋，我自己在回答時總是會按照 “瀏覽器從輸入一個 URL 到頁面顯示經(jīng)歷了什么” 的思路去回答溶推，這樣的回答既顯條理，又不易因緊張而將一些簡單的性能優(yōu)化法忘記奸攻。扯回來蒜危，瀏覽器渲染可以是這個題目的最后一個環(huán)節(jié)，先上一張自己畫的圖：
類似的圖也有不少睹耐，但大同小異辐赞，大概即是瀏覽器首先加載 HTML 文檔，過程中遇到了其他資源會同時加載并解析其他資源硝训，最后生成 Rendering tree 經(jīng)過 layout 與 paint 顯示到頁面响委。需要注意的是，html 渲染為增量式渲染捎迫，瀏覽器無需等待 html 加載完便開始解析構建 DOM晃酒。這張圖有助于后面的理解，但不再細說窄绒。
記：哪些操作會觸發(fā) reflow 贝次？哪些會觸發(fā) repaint ？
HTML / CSS / JS 的加載與阻塞
關于加載
需要明確彰导，.html / .css / .js 包括圖片音頻等其他資源蛔翅，在加載上幾乎完全并行（幾乎敲茄？請看下文），不存在阻塞一說山析。誠然堰燎，我們訪問 example.com/index.html 時需要解析到 <link rel="stylesheet" href="/style.css"> 才會去加載 style.css，但這并不影響瀏覽器同時去加載另外的資源笋轨。
- 加載：漢語詞語秆剪，字面意思是增加裝載量。現(xiàn)多用于計算機相關領域爵政，表示啟動程序時文件或信息的載入仅讽。英譯 “l(fā)oad”。（來自百度百科）
- 在前端這里钾挟，“加載” 就是下載洁灵。
- 很多文章將 “加載 (load)” 與 “解析 (parse)” “渲染 (layout+paint)” 混淆，我認為是不妥的掺出，本文會一一講到徽千。
資源之間的加載是并行，互不影響的汤锨，但是加載也是有限制的双抽，現(xiàn)代瀏覽器對同一域名下的最大并發(fā)連接數(shù)一般是 6，也就是說如果同時對同一域名發(fā)起超過 6 個連接泥畅，超出的請求就會被阻塞荠诬。忱欧看到 js css 等靜態(tài)文件使用 CDN 托管位仁，一個原因即是通過使用多域名并發(fā)加載，提高加載速度方椎。
但加載需要時間聂抢，現(xiàn)代瀏覽器為了性能考慮，不會無限制的等待資源加載棠众，對資源的加載會有失效時間琳疏。在 Chrome 60 中測試加載 js / css 文件時最多會等待 4 min，若 4 min 內(nèi)服務器無任何響應數(shù)據(jù)返回闸拿，則會觸發(fā)加載錯誤空盼，會在 console 輸出 net::ERR_EMPTY_RESPONSE 錯誤提示，同時瀏覽器繼續(xù)解析新荤。但若 4 min 內(nèi)返回部分響應數(shù)據(jù)揽趾，則會繼續(xù)等待完整的響應返回（即會突破 4 min 的失效時間限制，我測試了 13 min 仍然沒有報錯我放棄了苛骨，推測瀏覽器沒有對此做進一步的時間限制篱瞎，這是合理的）苟呐，這里與服務器推送技術 long-polling 相似。見下圖：
關于阻塞
明確了這點俐筋，那么資源之間的阻塞是怎樣的牵素？阻塞是指資源加載完之后按照一定的順序解析 (parse) (或 html 文檔的渲染等)(注意這里的順序不是指完全的串行)，有順序就有阻塞澄者，下面講到 css 阻塞 html 渲染笆呆，js 阻塞 DOM 樹構建，css 阻塞 js 的解析粱挡，js 阻塞一切等：
-
css 阻塞 html 渲染 (layout)
試想腰奋，如果 css 不阻塞 html 渲染，那么瀏覽器會先將無樣式的 html 渲染出來抱怔，然后突然產(chǎn)生樣式劣坊，即 FOUT(Flash Of Unstyled Text)。因此現(xiàn)代瀏覽器中屈留，通過內(nèi)聯(lián) <style>局冰，外聯(lián) <link> 以及
document.write('<link ...>')等引入的 css 均會阻塞 html 渲染，但不會影響 html 構建 DOM 樹灌危。
需要注意的是康二，這與 css 在文檔中引入位置無關，考慮下面的代碼：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>hello, zphhhhh</h1> <link rel="stylesheet" href="/css/style.css"> </body> </html>上面代碼若 css 文件加載需要 2s勇蝙，文檔會在 2s 后才顯示出來沫勿，但 DOM 樹早已構建完畢，就等 CSSOM 了味混。但也存在 css 不阻塞的情況产雹，比如
- 媒體查詢不符合時，會同時加載但不會阻塞 html 渲染:
<link rel="stylesheet" href="index_print.css" media="print"> - 使用 DOM API 動態(tài)生成 link：
document.createElement('link'); - CSS preload翁锡，是 Resource Hints 規(guī)范蔓挖，兼容性問題不再細說，可自行了解馆衔。
<link rel="preload" href="index.css" as="style" onload="this.rel='stylesheet'">
- 媒體查詢不符合時，會同時加載但不會阻塞 html 渲染:
-
js 阻塞 DOM 樹構建（沒有 DOM 樹就沒有 HTML 渲染）
js 可以通過document.write修改 HTML 文檔流瘟判，因此在執(zhí)行 js 時，瀏覽器會停止構建 DOM角溃，但由于瀏覽器的增量構建拷获，瀏覽器可能會渲染出一部分 DOM（ js 之前），考慮下面的代碼：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>hello,</h1> <script src="/main.js"></script> <h1>zphhhhh</h1> </body> </html>上面代碼若 js 文件加載需要 2s减细，文檔會先顯示
hello,匆瓜，2s 后再顯示zphhhhh。但也存在 js 不阻塞 DOM 構建的情況，可以：-
加入 async / defer 屬性（只是有可能不阻塞）陕壹，聲明 js 中沒有使用
document.write()质欲，二者區(qū)別在于，聲明 async 會在 js 加載完后立即解析執(zhí)行糠馆，而聲明 defer 在 js 加載完仍需等待 DOM 樹構建完成（即推遲執(zhí)行）嘶伟，看圖就明白：
async VS defer如下代碼：
<script async src="./main.js"></script> 或 <script defer src="./main.js"></script>但這也意味著 js 中真的不能使用
document.write()了，強行使用會有提示又碌，且沒有生效九昧，但同一文件中其他代碼仍可正常執(zhí)行：Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. -
使用 DOM API 動態(tài)生成 script
document.createElement('script');
-
-
css 阻塞 js 解析（執(zhí)行）
由于 js 可能會讀取或修改 CSSOM，因此需等待CSSOM構造完成后毕匀，js 才能執(zhí)行铸鹰。考慮如下代碼：<body> <h1>hello,</h1> <link rel="stylesheet" href="/css/style.css"> <script src="/main.js"></script> <h1>zphhhhh</h1> </body>若 css 加載 2s皂岔，則 js 會等待 css 的加載和構建 CSSOM蹋笼，完畢后才會執(zhí)行。當然躁垛，若上例的 js 聲明了 async / defer剖毯，則以 async / defer 的約定執(zhí)行，即可能會 js 不被 css 阻塞教馆。
擴展上述第 2 點即為 js 的解析執(zhí)行幾乎阻塞一切
不難理解逊谋，瀏覽器 js 的單線程模型也使其更加簡單，js 在解析執(zhí)行期間幾乎會阻塞一切土铺，當然是指阻塞一切其他資源的解析構建渲染等等胶滋，不包含加載。
瀏覽器關鍵渲染路徑
理清了 html / css / js 等資源的加載與阻塞悲敷，終于可以開心的繼續(xù)理解瀏覽器的關鍵渲染路徑了究恤。關鍵渲染路徑什么鬼？這是指瀏覽器從最初的加載資源到第一次顯示內(nèi)容需要的資源與時間镀迂，考慮下面代碼：
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="index.js"></script>
<script src="baidu_#js"></script>
</head>
<body>
</body>
</html>
此時關鍵資源數(shù)有 1*.html + 1 * .css + 2 * .js = 4 個丁溅，嘗試改為：
<html>
<head>
<style>
/* style.css */
</style>
<script>
// index.js
</script>
<script defer src="baidu_#js"></script>
</head>
<body>
</body>
</html>
則關鍵資源數(shù)只有 1*.html 個唤蔗，當然這只是一個最簡單的模型探遵，實際操作當然不能把所有 js css 寫到 html 中，意會就好~
優(yōu)化的角度來看妓柜，可以從下面幾個方面考慮：
- 考慮到瀏覽器對同一域名最大并發(fā)連接限制箱季，可以減少 http 請求，合并請求棍掐，比如合并 css藏雏，打包 js，小文件使用 base64 等作煌，Webpppppack~
- 適量的多域名提高并發(fā)數(shù)量掘殴，但不能太多赚瘦，因為 DNS 解析等也需要花費時間。
- 啟用壓縮奏寨，壓縮靜態(tài)資源體積起意。
- 啟用緩存。
- 以及上面講 “加載與阻塞” 提到的方法~
// 暫時想到這么多病瞳，經(jīng)驗不足如本文有錯誤之處揽咕，望請及時指出，免誤后人套菜，非常感謝亲善。
