---

CSS 性能優化

CSS 提高性能的方法

1. 選擇器優化

1.1 選擇器性能原則

• 避免使用通配符和深層次的嵌套選擇器
• 盡量使用類選擇器，減少使用復雜的選擇器
• 避免使用標簽選擇器作為關鍵選擇器
• 減少選擇器的嵌套層級
• 優先使用類選擇器
• 避免使用 !important

1.2 選擇器優化示例

/* 不推薦 */
div ul li a span {color: red;
}/* 推薦 */
.nav-link {color: red;
}

2. 重排（Reflow）和重繪（Repaint）優化

2.1 重排和重繪的概念

• 重排（Reflow）：當 DOM 元素的尺寸、結構或某些屬性發生變化時，瀏覽器需要重新計算元素的幾何屬性，將其安放在界面中的正確位置，這個過程稱為重排。
• 重繪（Repaint）：當 DOM 元素的樣式發生變化，但不影響布局時，瀏覽器會重新繪制元素，這個過程稱為重繪。

2.2 觸發重排的操作

1. 改變元素尺寸：

   /* 會觸發重排 */
   element.style.width = '100px';
   element.style.height = '100px';
   element.style.padding = '10px';
   element.style.margin = '10px';
   

2. 改變元素位置：

   /* 會觸發重排 */
   element.style.position = 'absolute';
   element.style.top = '100px';
   element.style.left = '100px';
   

3. 改變元素內容：

   // 會觸發重排
   element.innerHTML = 'new content'
   element.innerText = 'new text'
   

4. 改變窗口大小：

   // 會觸發重排
   window.addEventListener('resize', () => {})
   

2.3 觸發重繪的操作

1. 改變顏色相關屬性：

   /* 只觸發重繪 */
   element.style.color = 'red';
   element.style.backgroundColor = 'blue';
   element.style.borderColor = 'green';
   

2. 改變透明度：

   /* 只觸發重繪 */
   element.style.opacity = '0.5';
   

3. 改變陰影：

   /* 只觸發重繪 */
   element.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';
   

2.4 優化重排和重繪的方法

1. 使用 transform 代替位置改變：

   /* 不推薦 */
   element.style.left = '100px';
   element.style.top = '100px';/* 推薦 */
   element.style.transform = 'translate(100px, 100px)';
   

2. 批量修改 DOM：

   // 不推薦
   for (let i = 0; i < 100; i++) {element.style.width = i + 'px'
   }// 推薦
   const fragment = document.createDocumentFragment()
   for (let i = 0; i < 100; i++) {const div = document.createElement('div')div.style.width = i + 'px'fragment.appendChild(div)
   }
   document.body.appendChild(fragment)
   

3. 使用 CSS 類名批量修改樣式：

   /* 推薦 */
   .active {background: red;color: white;padding: 10px;margin: 5px;
   }
   

4. 使用絕對定位脫離文檔流：

   /* 推薦 */
   .animation-element {position: absolute;top: 0;left: 0;
   }
   

5. 使用 CSS3 硬件加速：

   /* 推薦 */
   .hardware-accelerated {transform: translateZ(0);/* 或 */backface-visibility: hidden;/* 或 */perspective: 1000;
   }
   

3. 資源優化

3.1 CSS 文件優化

• 壓縮 CSS 文件
• 合并多個 CSS 文件
• 移除未使用的 CSS
• 使用 CSS 預處理器（Sass/Less）和后處理器（PostCSS）

3.2 圖片資源優化

• 使用 CSS Sprites 合并圖片
• 使用字體圖標（Icon Font）代替圖片
• 使用 SVG 代替位圖
• 使用 WebP 格式圖片
• 使用響應式圖片

4. 加載優化

4.1 關鍵 CSS 優化

<!-- 關鍵 CSS 內聯 -->
<style>/* 首屏關鍵樣式 */
</style><!-- 非關鍵 CSS 異步加載 -->
<linkrel="preload"href="non-critical.css"as="style"onload="this.onload=null;this.rel='stylesheet'"
/>

4.2 媒體查詢優化

/* 分離桌面和移動端樣式 */
@media screen and (min-width: 768px) {/* 桌面端樣式 */
}@media screen and (max-width: 767px) {/* 移動端樣式 */
}

5. 其他優化建議

1. 使用 CSS 變量：

   :root {--primary-color: #007bff;--secondary-color: #6c757d;
   }.element {color: var(--primary-color);
   }
   

2. 使用 CSS Grid 和 Flexbox 布局：

   /* 使用 Flexbox */
   .container {display: flex;justify-content: space-between;
   }/* 使用 Grid */
   .grid-container {display: grid;grid-template-columns: repeat(3, 1fr);
   }
   

3. 使用 will-change 提示瀏覽器：

   .will-animate {will-change: transform;
   }
   

4. 避免使用 @import：

   /* 不推薦 */
   @import 'other.css';/* 推薦 */
   <link rel="stylesheet" href="other.css">