CSS【詳解】性能優化

精簡 CSS

移除未使用的 CSS（“死代碼”），可借助工具如 PurgeCSS、UnCSS 自動檢測并刪除未被頁面使用的樣式。
避免重復樣式，通過提取公共樣式（如 @mixin 或公共類）減少代碼冗余。利用預處理器（Sass、Less）變量、混合宏功能減少重復代碼。
避免過度嵌套（如 div > ul > li > a 可簡化為 .nav-link），復雜選擇器會增加瀏覽器匹配元素的計算成本。
避免全局樣式濫用，使用 CSS Modules 或 Scoped CSS（如 Vue）隔離樣式，減少 CSSOM 構建時間。

壓縮 CSS

使用 Gzip 或 Brotli 壓縮傳輸，或通過 PostCSS、csso 等工具壓縮代碼

后處理器（PostCSS）可自動優化代碼（如自動前綴、壓縮、刪除冗余樣式）

拆分 CSS

按頁面或組件拆分 CSS，避免單個超大 CSS 文件阻塞首屏渲染。
利用媒體查詢拆分不同場景的樣式（如 @media print 單獨拆分打印樣式），瀏覽器會根據當前場景只加載必要的部分。

內聯首屏 CSS

將關鍵 CSS（首屏必需樣式）內聯到 <head> 中，避免外部 CSS 文件加載延遲導致的首屏空白。

異步加載非首屏 CSS

通過 JavaScript 動態插入 <link> 標簽

減少觸發重排與重繪的CSS操作

集中修改樣式（如通過添加 / 移除類一次性修改多個樣式，而非逐條設置 element.style）。
避免頻繁讀取會觸發重排的屬性（如 offsetWidth、scrollTop），可先緩存值再使用。

使用性能更好的 CSS 語法

優先使用 ID 或類選擇器，避免使用通配符（*）、屬性選擇器（[type=“text”]）等低效選擇器，尤其是在大型頁面中。
避免鏈式類選擇器（如 .box.container.large），增加匹配復雜度
瀏覽器匹配選擇器的順序是 “從右到左”，例如 .list li a 會先查找所有 <a>，再過濾父元素為 <li> 且祖先為 .list 的元素，效率較低。
優化示例：將 .list li a 改為 .list-link（直接給 <a> 添加類）。
對靜態效果可使用圖片代替；對動畫效果盡量在小范圍元素上使用。

content-visibility: auto

延遲渲染不在視口內的元素

瀏覽器會跳過不在視口內元素的渲染過程（包括布局、繪制等），從而減少瀏覽器的工作負擔。

使用場景
長列表、滾動頁面中存在大量離屏元素的情況，例如電商商品列表、新聞資訊列表等。

.list-item {content-visibility: auto;
}

will-change

提前告知瀏覽器元素可能會發生的變化，讓瀏覽器有時間提前做好優化準備（如創建獨立的圖層、預先計算等），從而使動畫或過渡更加流暢。

瀏覽器會根據 will-change 指定的屬性，對元素進行相應的優化處理。但需要注意，不能濫用該屬性，否則可能會消耗過多的內存和性能。

使用場景
即將發生動畫或過渡的元素，例如元素的位置移動、大小變換、透明度變化等。

.box {will-change: transform, opacity;
}

transform

使用 transform 進行動畫或過渡時，瀏覽器會將元素提升到獨立的圖層進行處理，并且不會觸發頁面的重排（布局）和重繪（繪制），只需要進行復合操作，性能更高。

復合操作是將頁面中不同圖層的內容合并成最終的頁面顯示，這個過程相對高效。而重排和重繪會消耗大量的計算資源。

使用場景
各種需要動畫效果的元素，如滑動的輪播圖、彈出的對話框等。

.slide {transition: transform 0.3s ease;
}
.slide:hover {transform: translateX(10px);
}

opacity

使用 opacity 進行動畫或過渡時，也不會觸發重排和重繪，只需要進行復合操作，性能較好。

透明度的變化只影響元素的顯示效果，不會改變元素的布局和幾何形狀，因此瀏覽器可以高效地處理。

使用場景
元素的淡入淡出效果，如模態框的顯示與隱藏、按鈕的 hover 效果等。

.fade {transition: opacity 0.3s ease;opacity: 1;
}
.fade:hover {opacity: 0.5;
}

contain

限制元素內部的渲染影響范圍，告訴瀏覽器該元素的渲染不會影響到外部，從而讓瀏覽器可以進行更高效的渲染優化。

contain 有多個取值，如 layout（表示元素內部的布局變化不會影響外部）、paint（表示元素的繪制只在自身范圍內，不會溢出到外部）、size（表示元素的大小不會受內部內容變化的影響）等。通過合理設置這些值，可以減少瀏覽器需要檢查和更新的區域。

使用場景
內部結構復雜、但與外部布局關聯性較小的元素，例如獨立的組件、卡片等

.component {contain: layout paint size;
}

background-attachment: fixed（謹慎使用）

使背景圖片固定在視口中，不會隨著頁面的滾動而滾動。在某些情況下，合理使用可以減少背景圖片的重繪次數。

但如果背景圖片較大或頁面滾動頻繁，可能會導致性能問題，因此需要謹慎使用，根據實際情況測試效果。

body {background-image: url('bg.jpg');background-attachment: fixed;
}

image-rendering

用于控制圖片縮放時的渲染方式，合理設置可以使圖片在縮放時保持更好的視覺效果，同時在一定程度上減少渲染開銷。

auto：默認值，使用瀏覽器默認的圖片縮放算法。
pixelated：當圖片放大時，會以像素塊的形式顯示，適合像素風格的圖片，渲染效率較高。

使用場景
需要進行縮放顯示的圖片，尤其是像素風格的圖片。

.pixel-art {image-rendering: pixelated;
}

position: fixed / position: absolute (適度使用)

將元素從文檔流中脫離，其位置變化不會影響其他元素的布局，從而減少因元素移動導致的重排。

固定定位（fixed）或絕對定位（absolute）的元素會獨立計算布局，其尺寸或位置的修改僅影響自身，不會觸發父元素或兄弟元素的布局更新。

使用場景
懸浮組件（如導航欄、彈窗、廣告位），避免其位置變化牽連其他元素的布局計算。

注意事項
過多脫離文檔流的元素可能增加圖層管理成本，需適度使用。

float（合理使用）

浮動元素的布局計算相對獨立，其位置調整對周邊元素的影響范圍較小（僅影響 “浮動流” 內的元素）。

使用場景
圖文混排（如新聞段落中的圖片浮動），避免圖片與文字的布局相互干擾導致頻繁重排。

注意事項
濫用浮動可能導致布局混亂，且現代布局更推薦 flex 或 grid，但特定場景下浮動仍有性能優勢。

pointer-events: none

禁止元素響應鼠標事件（如點擊、 hover 等），瀏覽器無需為該元素監聽鼠標交互，減少事件處理開銷。

元素被設置為 pointer-events: none 后，會被排除在鼠標事件目標之外，瀏覽器無需對其進行事件捕獲和處理。

使用場景
純裝飾性元素（如背景圖案、動畫特效層），無需用戶交互的元素可禁用鼠標事件，提升事件處理效率。

.decorative-layer {pointer-events: none;
}

user-select: none

禁止用戶選中元素內容，減少瀏覽器對文本選中狀態的跟蹤和渲染

瀏覽器默認會監聽文本選中事件并繪制選中高亮，禁用后可減少這部分的渲染開銷。

使用場景
按鈕、圖標、導航等無需復制的元素，避免用戶誤選并降低渲染壓力。

.button {user-select: none;
}

backface-visibility: hidden

隱藏元素旋轉時的 “背面”，減少 3D 變換中的渲染計算，降低 GPU 負載。

使用場景
3D 旋轉動畫（如卡片翻轉效果），無需顯示背面時使用，提升動畫流暢度。

.card {transform-style: preserve-3d;backface-visibility: hidden;
}

isolation: isolate

創建一個新的堆疊上下文，限制元素內部的渲染影響范圍，避免與外部元素的堆疊計算相互干擾。

堆疊上下文是瀏覽器處理元素層疊順序的機制，isolation: isolate 強制創建獨立上下文，減少跨上下文的層疊計算。

使用場景
復雜組件（如彈窗、下拉菜單），避免其內部元素的層疊關系影響頁面其他部分的渲染。

.dropdown {isolation: isolate;
}

overflow: hidden

瀏覽器默認會計算元素所有內容的布局，即使超出容器范圍，overflow: hidden 可讓瀏覽器直接忽略超出部分，降低計算量。

配合 content-visibility: auto 使用時，裁剪效果可進一步提升離屏元素的渲染效率。

使用場景
圖片容器、卡片組件等需要裁剪內容的元素，避免超出部分的無效渲染。

touch-action

瀏覽器對觸摸事件的默認處理（如手勢識別）較為復雜，touch-action 可禁用不必要的行為，提升觸摸交互的響應速度。

使用場景
移動端自定義交互元素（如滑動組件、手勢控制區域），例如禁用滾動：

.swipe-container {touch-action: none; /* 禁用所有默認觸摸行為 */
}

font-display（@font-face 中）

使用 font-display: swap 避免字體加載期間的文本不可見（FOIT）；限制字體變體（如字重、樣式）數量，減少字體文件體積。

通過設置字體加載期間的顯示策略（如使用系統默認字體暫代），減少瀏覽器等待字體加載時的渲染阻塞。

使用場景
引入自定義字體時，優化字體加載體驗：

@font-face {font-family: 'MyFont';src: url('myfont.woff2') format('woff2');font-display: swap; /* 加載時使用備用字體，加載完成后替換 */
}

避免使用低性能的 CSS 語法

避免使用通配符（*）、屬性選擇器（[type=“text”]）等低效選擇器
避免使用過大的背景圖
避免昂貴的 CSS 屬性，部分屬性計算成本高，如 box-shadow（尤其是模糊半徑大時）、filter（如 blur）、clip-path 等，頻繁使用或應用于大面積元素會導致性能下降。
CSS 變量（–var）雖靈活，但頻繁通過 JavaScript 讀寫會觸發額外的樣式計算，高頻率交互場景下需謹慎使用。
預處理器（Sass、Less）的嵌套功能需合理使用，避免編譯后生成復雜選擇器；
避免@import：@import會導致 CSS 加載串行化（必須等前一個加載完成才加載下一個），改用<link>并行加載。