文章中英模式

常見的前端面試題目 - 頁面載入 - Utility First CSS 的好處

深入解析 Utility First CSS 的運作原理、對頁面載入速度的優化效果，以及實際應用場景，包含提升網站性能的關鍵知識及面試常見問題的完整解答。

文章中英模式

懶得看文章？那就來看影片吧

基本概念

Utility First CSS 是一種 CSS 設計方法，通過使用預定義的、單一用途的 CSS 類別來構建用戶界面。每個類別通常只負責一個特定的 CSS 屬性，讓開發者直接在 HTML 中組合這些類別，而不是寫自定義的 CSS 樣式。

最受歡迎的 Utility First CSS 框架當屬 Tailwind CSS，它提供了豐富的預設類別，可以快速構建現代網頁界面。

<!-- 傳統 CSS 方法 -->
<div class="profile-card">
  <img class="profile-image" src="avatar.jpg">
  <div class="profile-content">
    <h2 class="profile-name">布魯斯</h2>
    <p class="profile-bio">前端工程師</p>
  </div>
</div>

<!-- Utility First CSS 方法 (Tailwind) -->
<div class="bg-white rounded-lg shadow-md p-4">
  <img class="w-16 h-16 rounded-full" src="avatar.jpg">
  <div class="ml-4">
    <h2 class="text-xl font-bold text-gray-800">布魯斯</h2>
    <p class="text-gray-600">前端工程師</p>
  </div>
</div>

Utility First CSS 如何優化頁面載入速度

1. 減少 CSS 檔案大小

┌─────────────────────────────────────────────┐
│                                             │
│  傳統 CSS 方式                              │
│                                             │
│  開發中的 CSS: 85KB                         │
│  使用的 CSS: 僅 15KB (82% 未使用)           │
│                                             │
│  Utility First CSS 方式                     │
│                                             │
│  生產環境 CSS: 10KB (只包含使用的類別)       │
│  未使用 CSS: 幾乎為 0                        │
│                                             │
└─────────────────────────────────────────────┘

傳統 CSS 流程:
頁面 A --> 載入 header.css, home.css
頁面 B --> 載入 header.css, about.css  (重複下載 header.css)

Utility CSS 流程:
頁面 A --> 載入 tailwind.css
頁面 B --> 使用緩存的 tailwind.css  (無需重複下載)

2. 避免 CSS 阻塞渲染

頁面載入流程比較:

傳統 CSS:
1. 下載 HTML
2. 解析 HTML 發現多個 CSS 文件
3. 下載所有 CSS 文件  ⟸ 渲染阻塞
4. 解析所有 CSS
5. 渲染頁面

Utility First CSS:
1. 下載 HTML
2. 解析 HTML 發現單一 CSS 文件
3. 下載優化後的小型 CSS ⟸ 阻塞時間短
4. 快速解析簡單的 CSS
5. 更快開始渲染頁面

3. 減少網絡請求

// 分析不同 CSS 方法的網絡請求情況

// 傳統 CSS 方式 (多個請求)
// main.css, components.css, pages.css, etc.
網絡請求: 5個 CSS 文件
總下載量: 150KB
TTFB (Time to First Byte): 較慢 (多個請求排隊)

// Utility First CSS 方式 (單一請求)
// tailwind.min.css
網絡請求: 1個 CSS 文件
總下載量: 10KB
TTFB: 更快 (單一小型請求)

4. 範例：多組件共用一個 class

<!-- 傳統 CSS 方法 -->
<style>
  .component-a .width-2 { width: 2rem; }
  .component-b .width-2 { width: 2rem; }
</style>
<div class="component-a">
  <div class="width-2"></div>
</div>
<div class="component-b">
  <div class="width-2"></div>
</div>

<!-- Utility First CSS 方法 (Tailwind) -->
<div class="component-a">
  <div class="w-2"></div>
</div>
<div class="component-b">
  <div class="w-2"></div>
</div>

在這個範例中，Utility First CSS 只需定義一次 w-2 class，減少了重複的 CSS 定義，從而提高了性能。

潛在的缺點及解決方案

1. HTML 可能變得臃腫

<!-- 大量類別可能導致HTML難以閱讀 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
  登入
</button>

解決方案：使用組件抽象化或利用框架的抽象機制

// React 組件抽象
function PrimaryButton({ children }) {
  return (
    <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
      {children}
    </button>
  );
}

// 使用時簡潔明了
<PrimaryButton>登入</PrimaryButton>

2. 學習曲線

需要學習大量預定義類別名稱及其對應的效果。

🔥 常見面試題目

（一）Utility First CSS 和傳統 CSS 方法的主要區別是什麼？

解答：

特性	傳統 CSS	Utility First CSS
組織方式	基於組件或頁面創建自定義類別，將樣式集中在 CSS 文件中	使用預定義的原子類別，直接在 HTML 中組合應用
可維護性	隨著專案增長，CSS 文件會變得複雜，出現重複樣式	通過重用類別減少重複樣式，但 HTML 可能會變得冗長
性能	通常產生較大的 CSS 文件，包含未使用的樣式	生產環境下的 CSS 更小，只包含使用的類別
開發速度	需要在 HTML 和 CSS 文件間切換，命名新類別	直接在 HTML 中應用樣式，無需創建新 CSS
代碼範例	.btn { background: blue; color: white; padding: 8px 16px; border-radius: 4px; } <button class="btn">登入</button>	<button class="bg-blue-500 text-white py-2 px-4 rounded"> 登入 </button>

（二）使用 Utility First CSS 如何影響關鍵渲染路徑 (Critical Rendering Path)？

解答：

Utility First CSS 通過以下方式優化關鍵渲染路徑：

1. 減少 CSSOM 大小
- 1. 更小的 CSS 文件 = 更快的 CSSOM 構建
- 2. 更簡單的選擇器 = 更快的樣式計算
2. 簡化樣式計算
- 1. 扁平的選擇器結構（通常只有單一類選擇器）
- 2. 減少樣式層疊和特異性計算
3. 更高效的緩存
- 1. 低 CSS 文件變更頻率，提高緩存命中率
- 2. 單一 CSS 文件意味著更少的網絡請求
4. 與內聯關鍵 CSS 配合
- 1. 僅內聯關鍵路徑上需要的 utility 類
- 2. 其餘樣式可以異步加載，不阻塞渲染

關鍵渲染路徑比較:

傳統 CSS:
HTML → [複雜的 CSSOM 構建 (慢)] → 渲染樹 → 佈局 → 繪製

Utility First CSS:
HTML → [簡單的 CSSOM 構建 (快)] → 渲染樹 → 佈局 → 繪製