前端性能優化---樣式優化---01
在前端開發中，性能優化是一個關鍵點，而樣式優化則是性能優化中不可忽視的一環。
筆者給出一些樣式優化措施，包括減少重繪和重排、CSS 選擇器優化、使用 CSS 預處理器和后處理器、CSS Sprite、Critical CSS 等技術。
1. 減少重繪和重排
重繪（Repaint）和重排（Reflow）是瀏覽器渲染過程中的兩個重要步驟。重繪指的是元素外觀的改變，不涉及布局；重排則是指元素的尺寸、位置發生變化，需要重新計算布局。重繪和重排都會消耗大量的計算資源，影響頁面的性能。
優化建議：
- 減少 DOM 操作：盡量減少對 DOM 的直接操作，使用文檔片段（Document Fragment）或一次性修改多個樣式屬性。
- 避免頻繁獲取計算樣式：避免在循環中頻繁訪問計算樣式，如
offsetWidth、clientHeight等，因為這會導致瀏覽器強制重排。 - 使用 CSS 變換替代位移：使用
transform屬性替代top、left等位置調整屬性，transform不會觸發重排。 - 批量修改樣式：通過修改 class 或使用 CSS Text 將多次樣式變更合并為一次。
2. CSS 選擇器優化
CSS 選擇器的效率對頁面性能有顯著影響。瀏覽器解析 CSS 選擇器時是從右向左匹配的，復雜的選擇器會增加解析時間。
優化建議：
- 避免使用通配符選擇器：如
*、[attr^="value"]等，盡量使用類選擇器、ID 選擇器。 - 減少后代選擇器：后代選擇器會匹配所有的子元素，盡量使用子選擇器或更具體的選擇器。
- 使用樣式表緩存：避免頻繁修改和加載外部樣式表，可以使用內聯樣式或者合理設置緩存頭。
3. 使用 CSS 預處理器和后處理器
CSS 預處理器（如 Sass、Less）和后處理器（如 PostCSS）可以幫助開發者編寫更簡潔、高效的 CSS 代碼，同時支持自動添加瀏覽器前綴、壓縮 CSS 文件等功能。
優化建議：
- 使用變量和混合：預處理器支持變量和混合（Mixin），可以減少重復代碼，提高樣式代碼的維護性。
- 自動前綴：使用 Autoprefixer 等工具自動添加瀏覽器前綴，確保兼容性同時避免手動編寫冗余代碼。
- CSS 壓縮：使用 CSSNano、csso 等工具壓縮 CSS 文件，減少文件體積，加快頁面加載速度。
4. 使用 CSS Sprite
CSS Sprite 是一種將多個小圖片整合到一張大圖片中的技術，減少 HTTP 請求次數，提高頁面加載速度。
優化建議：
- 合理規劃圖片位置：使用工具（如 SpriteSmith）生成 Sprite 圖片時，盡量將相關圖片放在一起，減少偏移量計算。
- 使用背景位置：通過
background-position屬性控制不同元素顯示不同的部分，避免多次加載相同的圖片資源。
5. Critical CSS
Critical CSS 是指在頁面加載時最重要的 CSS。通過提取頁面首屏渲染所需的 CSS，并將其內聯在 HTML 中，可以顯著減少渲染時間，提高首屏加載速度。
優化建議：
- 提取關鍵 CSS：使用工具（如 Critical、Penthouse）提取首屏渲染所需的關鍵 CSS。
- 內聯關鍵 CSS：將提取的關鍵 CSS 內聯在 HTML 文件的
<head>部分，其余的 CSS 文件延遲加載。
6. 其他優化措施
- 減少 CSS 文件大小：通過刪除無用的 CSS 規則、壓縮 CSS 文件等方式減少文件體積。
- 避免使用 @import：
@import會阻塞 CSS 加載，建議使用<link>標簽引入外部樣式表。（這個很關鍵） - 使用合適的字體格式：根據瀏覽器支持情況選擇合適的字體格式（如 WOFF2），并合理設置字體加載策略（如
font-display屬性）。
總結
樣式優化是前端性能優化中至關重要的一部分。通過減少重繪和重排、優化 CSS 選擇器、使用預處理器和后處理器、應用 CSS Sprite 技術、提取和內聯關鍵 CSS，以及其他優化措施，可以顯著提升頁面的加載和渲染速度，從而改善用戶體驗。在實際項目中，開發者應根據具體情況選擇合適的優化方案，并結合性能監測工具（如 Lighthouse、WebPageTest）進行持續優化。
浙公網安備 33010602011771號