CSS Performance - 檔案下載的差異

@import 載入流程

1. HTML 解析完成。
2. 載入包含 @import 的 CSS 檔案。
3. 解析 CSS 發現 @import。
4. 序列載入每個匯入的檔案。
5. 形成載入鏈，一個接一個。

時間軸: 0ms -------- 100ms -------- 200ms -------- 300ms -------- 400ms
HTML:   ████████████████████████████████████████████
CSS:    █████
CSS1:        ████████████████
CSS2:        ██████████████████████
CSS3:        ████████████████████████████
Render:                                  ██████████████

WARNING

• 不能充分利用瀏覽器並發請求資源的行為。因為要等 all.css 下載完畢，其他的 CSS 才會陸續引入，要是 all.css 過於肥大，其他的 CSS 只會更晚載入客端中。
• 續上則，延後載入，可能會導致頁面樣式閃爍。

<link> 載入流程

1. HTML 解析到 <link> 標籤。
2. 立即發起 HTTP 請求。
3. 平行載入多個 CSS 檔案。
4. 不阻塞 HTML 解析。
5. 載入完成後立即應用樣式。

時間軸: 0ms -------- 100ms -------- 200ms -------- 300ms
HTML:   ████████████████████████████████████████████
CSS1:   ████████████████
CSS2:   ██████████████████████
CSS3:   ████████████████████████████
Render:                             ██████████████