摘要：如下圖所示，外部樣式表是否會阻塞解析先不要看答案，可以自己思考和實驗一下通過如上圖所示，并沒有阻塞解析，因為時間線在之后。并且都支持事件回調處理，用于一些初始化工作。為了盡早地觸發事件，因為會延遲事件觸發。

singsong: 文章中 demo 猛戳這里吧

??最新內容請以github上的為準??

在講解之前，先看一個問題。如下圖所示，外部樣式表是否會阻塞 HTML 解析（先不要看答案，可以自己思考和實驗一下）：

通過DevTools->network:

如上圖所示，indexcss.css 并沒有阻塞 HTML 解析，因為 DOMContentLoaded 時間線在 indexcss.css 之后。但如果在 indexcss.css 之后添加script 標簽（不能為空），結果會一樣？

通過 DevTools->network:

如上圖所示，在 indexcss.css 之后添加 script 標簽(不能為空)后，此時 DOMContentLoaded 時間線位于 indexcss.css 之后。說明這里 indexcss.css 是阻塞 HTML 解析的。

Style sheets on the other hand have a different model. Conceptually it seems that since style sheets don"t change the DOM tree, there is no reason to wait for them and stop the document parsing. There is an issue, though, of scripts asking for style information during the document parsing stage. If the style is not loaded and parsed yet, the script will get wrong answers and apparently this caused lots of problems. It seems to be an edge case but is quite common. Firefox blocks all scripts when there is a style sheet that is still being loaded and parsed. WebKit blocks scripts only when they try to access certain style properties that may be affected by unloaded style sheets.----Tali Garsiel

大概意思是：style-sheets 不會修改 DOM 樹，沒有理由為了解析 style-sheets 而阻塞文檔解析（即 style-sheets 不會阻塞文檔解析）。但如果在解析文檔過程中有腳本需要訪問樣式信息時，為了保證訪問樣式信息的正確性。Firefox 會阻塞所有腳本直到 style-sheets 下載解析完為止。而 WebKit 只在訪問的樣式屬性沒有被加載解析時，才會阻塞腳本。

也即 style-sheet 不會直接阻塞文檔解析，它只阻塞 script 的解析執行，才導致 style-sheet 間接阻塞文檔解析。如果將 script 設置為非阻塞式的呢？可以通過為 script 標簽設置 aysnc 特性來實現。可能你會疑問為什么不用 defer?

Both async and defer scripts begin to download immediately without pausing the parser and both support an optional onload handler to address the common need to perform initialization which depends on the script. The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. The defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.

大概意思：async 和 defer 特性在腳本開始下載時，都不會阻塞文檔解析。并且都支持 onload 事件回調處理，用于一些初始化工作。另外，兩者對內聯腳本都無效，腳本中不能調用document.write()。而兩者的不同之處：帶有 async 特性的腳本會在腳本下載完后立即執行，且在 load 事件之前，所以不能確保腳本在文檔中出現的順序來執行。而帶有defer特性的腳本會在文檔解析完后按照在文檔中出現的順序來執行，且在 DOMContentLoaded 事件之前。

因此，這里設置 async 特性，而不設置 defer 特性。為了盡早地觸發 DOMContentLoaded 事件，因為 defer 會延遲 DOMContentLoaded 事件觸發。

為 script 標簽添加 async 特性:

通過DevTools->network:

當然，這里也可以通過媒體查詢 media讓 style-sheet 異步加載：

通過DevTools->network:

style-sheet 默認情況下是不會阻塞文檔解析。

style-sheet 只會阻塞 script 腳本解析執行。因為 script 腳本需要訪問 style-sheet 樣式信息，為了確保樣式信息的正確性，因此 script 腳本需要等待 style-sheet 下載解析完。從而導致 style-sheet 間接地阻塞文檔解析。

style-sheet 可以通過媒體查詢 media來實現異步加載。

為 script 設置 aysnc 特性來實現 script 異步加載，來加快文檔解析。

分析關鍵渲染路徑性能

Deciphering the Critical Rendering Path

How Browsers Work: Behind the scenes of modern web browsers