singsong:
文章中 demo 猛戳這裏吧
在解說之前，先看一個題目。以下圖所示，外部款式表是不是會壅塞 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 異步加載，來加速文檔剖析。
