CSS 背景渲染效能：1x1 像素圖片重複 vs 純色背景，對頁面 KPI 的影響

渲染管線差異

實測建議

• 純色背景：background-color: #336699; 效能最佳，零紋理開銷。
• 漸層背景：background: linear-gradient(...) 同屬 GPU 著色器計算，效能接近純色。
• 圖片背景：若必須用圖片，**避免 1x1 像素**，建議最小 16x16 或 32x32，減少 repeat 次數與繪製呼叫。
• Base64 內嵌：小圖片可轉 Base64 內嵌 CSS，減少 HTTP 請求，但增加 CSS 體積與解析時間，需權衡。

對 KPI 影響

• 單頁 50 個色塊若全用 1x1 PNG，首屏渲染時間可能增加 10-50ms（視 GPU 型號），在效能敏感頁面（動畫、滾動）會造成明顯卡頓。
• 改用 background-color 或 linear-gradient 可將此開銷降至不可測量。

結論：純色請用 background-color；圖案請用適當尺寸圖片或 CSS 漸層；嚴禁 1x1 像素 repeat。