CSS 渲染性能优化

为什么要进行性能优化？

在软件开发中，功能是首要考虑的，但性能优化同样重要。优化不仅能提升用户体验，还能节省带宽资源。

用户体验与加载速度

网站优化的目标是减少加载时间，提高响应速度。研究表明，页面加载速度对用户流量和销售额有显著影响。

效果

CSS 性能优化技巧

1. 使用 id selector

   • 避免冗余：#id1 {color:red;} 而不是 p#id1 {color:red;}

2. 避免深层次的节点

   • 简化选择器：p-class {color:red;} 而不是 div > div > div > p {color:red;}

3. 避免使用 attribute selector

   • 使用类或 id：#jartto {color:red;} 而不是 p[id="jartto"] {color:red;}

4. 浏览器前缀

   • 将前缀置于前面：-moz-border-radius: 5px; 然后 border-radius: 5px;

5. 遵守 CSSLint 规则

   • 避免过多的 web 字体、@import、正则选择器等。

6. 避免使用 @import

   • 影响并行下载，导致下载顺序紊乱。

7. 避免过分重排（Reflow）

   • 常见重排属性：width, height, margin 等。

8. 依赖继承

   • 如果属性可以继承，不必重复声明。

效果

更多的 CSSLint 规则可以参阅：CSSLint GitHub