css优化和提高性能有哪些方式？

一、编写优化（减少代码冗余）

1. 使用简写属性

   /* 冗余写法 */
   .box {
     margin-top: 10px;
     margin-right: 20px;
     margin-bottom: 10px;
     margin-left: 20px;
   }
   /* 优化写法 */
   .box { margin: 10px 20px; }
   

2. 避免重复定义
   合并相同选择器的重复声明：

   /* 冗余 */
   .title { color: #333; }
   .title { font-size: 16px; }
   /* 合并 */
   .title { color: #333; font-size: 16px; }
   

3. 减少嵌套层级（预处理器中）

   /* 冗余嵌套 */
   .parent {
     .child { ... }
     .child-link { ... }
   }
   /* 扁平化 */
   .parent { ... }
   .parent .child { ... }
   .parent .child-link { ... }
   

---

二、加载优化（降低文件体积）

4. 压缩 CSS 文件

   • 使用工具：CSSNano、PostCSS、Webpack 的 css-minimizer-webpack-plugin

5. 移除未使用 CSS

   • 工具：PurgeCSS、UnCSS

   // Webpack 配置示例
   const PurgeCSSPlugin = require('purgecss-webpack-plugin');
   module.exports = {
     plugins: [new PurgeCSSPlugin({ paths: glob.sync('src/**/*',  { nodir: true }) })]
   }
   

6. 分割关键 CSS
   首屏关键样式内联，非关键样式异步加载：

   <!-- 内联关键 CSS -->
   <style>/* 关键样式 */</style>
   <!-- 异步加载剩余 CSS -->
   <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">
   

7. 使用 CSS 雪碧图

   .icon-home { 
     background: url(sprite.png) -10px -20px;
     width: 30px; height: 30px;
   }
   

---

三、渲染优化（减少浏览器计算量）

8. 避免复杂选择器

   /* 低效 */
   body div#main ul li a { ... }
   /* 高效 */
   .nav-link { ... }
   

9. 减少重绘与回流

   • 使用 transform 和 opacity 实现动画（触发 GPU 加速）

     .box {
       transition: transform 0.3s;
     }
     .box:hover {
       transform: translateY(-5px);
     }
     

10. 优先使用 Flex/Grid 布局

    /* 传统浮动布局 */
    .float-left { float: left; width: 50%; }
    /* 现代 Flex 布局 */
    .container { display: flex; gap: 20px; }
    

11. 限制伪元素使用
    避免在滚动元素上使用 ::before/::after（可能引发频繁重绘）

---

四、工具链优化

12. 使用 CSS 预处理器变量

    $primary-color: #1890ff;
    .button { background: $primary-color; }
    

13. 启用 CSS 硬件加速

    .accelerate {
      transform: translateZ(0); /* 触发 GPU 渲染层 */
    }
    

14. 使用 CSS 自定义属性（变量）

    :root { --theme-color: #1890ff; }
    .header { color: var(--theme-color); }
    

15. 采用 CSS-in-JS 方案（如 styled-components）

    const Button = styled.button`
      background: ${props => props.primary ? '#1890ff' : '#fff'};
      padding: 8px 16px;
    `;
    

---

五、其他性能技巧

16. 避免 @import 语句
    用 <link> 替代（并行加载 vs 串行加载）

17. 简化媒体查询
    合并相同条件的媒体查询：

    /* 冗余 */
    @media (min-width: 768px) { .box { width: 50%; } }
    @media (min-width: 768px) { .title { font-size: 20px; } }
    /* 合并 */
    @media (min-width: 768px) {
      .box { width: 50%; }
      .title { font-size: 20px; }
    }
    

18. 减少通配符使用

    /* 低效 */
    * { margin: 0; }
    /* 针对性重置 */
    body, h1, p { margin: 0; }
    

19. 使用 will-change 优化动画

    .animate-element {
      will-change: transform, opacity;
    }
    

---

六、性能对比表

优化方向	典型手段	性能提升点
文件体积	压缩 + PurgeCSS	减少 30%-60% 文件大小
渲染性能	Flex/Grid 布局	减少 50% 布局计算时间
动画性能	使用 transform/opacity	帧率提升 2-3 倍
加载速度	异步加载非关键 CSS	首屏加载提速 20%-40%

---

七、高频面试问题

1. 问：如何检测 CSS 性能瓶颈？
   答：使用 Chrome DevTools 的 Performance 面板，查看 Layout/Paint 耗时

2. 问：为什么 transform 比 top/left 更适合动画？
   答：transform 触发 GPU 加速，避免重布局（reflow）

3. 问：CSS 选择器从右向左解析，对性能有何影响？
   答：避免使用深层嵌套选择器（如 ul > li > a），优先用 class

---

八、记忆口诀

“三减一优（减体积、减计算、减请求，优加载），现代布局优先选，动画硬件加速，工具链自动化”