引入外部 CSS：link 與 import 的效能差異
@import 載入流程
- HTML 解析完成。
- 載入包含
@import的 CSS 檔案。 - 解析 CSS 發現
@import。 - 序列載入每個匯入的檔案。
- 形成載入鏈，一個接一個。
時間軸: 0ms -------- 100ms -------- 200ms -------- 300ms -------- 400ms
HTML: ████████████████████████████████████████████
CSS: █████
CSS1: ████████████████
CSS2: ██████████████████████
CSS3: ████████████████████████████
Render: ██████████████WARNING
- 不能充分利用瀏覽器並發請求資源的行為。因為要等
all.css下載完畢，其他的 CSS 才會陸續引入，要是all.css過於肥大，其他的 CSS 只會更晚載入客端中。 - 續上則，延後載入，可能會導致頁面樣式閃爍。
<link> 載入流程
- HTML 解析到
<link>標籤。 - 立即發起 HTTP 請求。
- 平行載入多個 CSS 檔案。
- 不阻塞 HTML 解析。
- 載入完成後立即應用樣式。
時間軸: 0ms -------- 100ms -------- 200ms -------- 300ms
HTML: ████████████████████████████████████████████
CSS1: ████████████████
CSS2: ██████████████████████
CSS3: ████████████████████████████
Render: ██████████████link 與 import 的差別
html
<!-- ✅ 可平行下載 -->
<link rel="stylesheet" href="./base.css">
<link rel="stylesheet" href="./components.css">css
/* ❌ 串接式，必須排隊下載 */
@import url("base.css");
@import url("components.css");@import 要等前一份下載並解析完才會開始下一份，形成請求瀑布，首屏因此變慢。
讓首屏更快
- 把首屏必要的樣式 內嵌 在文件裡，其餘延後載入。
- 對重要資源使用預先載入，讓瀏覽器提早發出請求。
- 善用快取：檔名帶版本雜湊，內容沒變就不必重新下載。
引入位置與寫法的完整說明可參考 CSS 的撰寫位置 與 在 HTML 引入 CSS。
常見問題
為什麼不建議用 @import？
它必須等前一份樣式表下載並解析完才會開始下載下一份，形成請求瀑布。改用多個 <link>，瀏覽器就能平行下載。
樣式表要拆成幾個檔案？
現代的建置工具會自行打包與拆分，開發時依模組拆檔即可。手寫的靜態網站則建議控制在少數幾個檔案。
怎麼讓首屏更快出現？
把首屏必要的樣式內嵌在文件裡，其餘的樣式表延後載入。這樣瀏覽器不必等外部檔案就能先畫出畫面。
