CSS 阻塞 和 js 阻塞
預設情況下，CSS 被視為阻塞渲染的資源，這意味著瀏覽器不會渲染任何已處理的內容，直至CSSOM構建完畢
javascript 不僅可以讀取和修改DOM 屬性，還可以讀取和修改CSSOM 屬性
當瀏覽器遇到一個script標記時，DOM 構建將暫停，直至指令碼完成執行。
javascript 可以查詢和修改 DOM 與 CSSOM
CSSOM 構建時，javascript 執行將暫停，直至 CSSOM 就緒。
所以，script 標籤的位置很重要。實際使用時，可以遵循下面2個原則
CSS 優先：引入順序上，CSS 資源優於javascript資源
javascript 應儘量少影響 DOM 的構建
個人理解 css 的解析會 阻塞 javascript 的執行，CSSDOM Tree和 DOM Tree 形成 渲染樹Rendor Tree,所以css 沒有解析完的時候會阻止渲染樹的形成，造成渲染的阻塞（不是 阻塞DOM Tree 的構建）（此時文件不會在頁面上顯示）
所以 css link 標籤放文件的前面 ，優先讓 css 的 http 請求完成， CSSDOM 的 構建完成
javascript 會阻塞 DOM Tree 的構建，所以 javasript 一般都放在文件後面。
CSS 會阻塞渲染嗎？
從瀏覽器的渲染原理來看，渲染引擎會將css 構建成 CSSOM Tree 然後再渲染頁面。也就是說，CSS 會 阻塞 頁面的渲染！但是，CSS 並不會阻塞 DOM 的解析。（因為需要具有 DOM 以及 CSSOM 才會構建渲染樹）
css載入會阻塞js執行嗎？
由上面的推論，我們可以得出，css載入不會阻塞DOM樹解析，但是會阻塞DOM樹渲染。那麼，css載入會不會阻塞js執行呢?
同樣，通過程式碼來驗證.
<!DOCTYPE html>
<html lang="en">
<head>
<title>css阻塞</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
console.log('before css')
var startDate = new Date()
</script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<h1>這是紅色的</h1>
<script>
var endDate = new Date()
console.log('after css')
console.log('經過了' + (endDate -startDate) + 'ms')
</script>
</body>
</html>
假設: css載入會阻塞後面的js執行
預期結果: 在link後面的js程式碼，應該要在css載入完成後才會執行
實際結果:
由上圖我們可以看出，位於css載入語句前的那個js程式碼先執行了，但是位於css載入語句後面的程式碼遲遲沒有執行，直到css載入完成後，它才執行。這也就說明了，css載入會阻塞後面的js語句的執行。詳細結果看下圖(css載入用了5600+ms):
結論
由上所述，我們可以得出以下結論:
- css載入不會阻塞DOM樹的解析
- css載入會阻塞DOM樹的渲染
- css載入會阻塞後面js語句的執行、
因此，為了避免讓使用者看到長時間的白屏時間，我們應該儘可能的提高css載入速度，比如可以使用以下幾種方法:
- 使用CDN(因為CDN會根據你的網路狀況，替你挑選最近的一個具有快取內容的節點為你提供資源，因此可以減少載入時間)
- 對css進行壓縮(可以用很多打包工具，比如webpack,gulp等，也可以通過開啟gzip壓縮)
- 合理的使用快取(設定cache-control,expires,以及E-tag都是不錯的，不過要注意一個問題，就是檔案更新後，你要避免快取而帶來的影響。其中一個解決防範是在檔名字後面加一個版本號)
- 減少http請求數，將多個css檔案合併，或者是乾脆直接寫成內聯樣式(內聯樣式的一個缺點就是不能快取)