阅读量:0
1. 减少选择器的复杂性。，2. 避免使用通配符选择器。，3. 优化CSS规则顺序。，4. 合并相同属性。，5. 压缩CSS文件。，6. 利用浏览器缓存。，7. 使用CDN加速。，8. 减少重绘和回流。，9. 使用硬件加速。，10. 避免使用@import。，11. 选择合适的盒模型。
1、十六进制的颜色值对位数与大小写：使用大写及6位数标注的十六进制颜色值，避免使用小写字母或省略成3位数的写法。
2、display与visibility的差异：使用display:none;隐藏对象不保留物理空间，而visibility:hidden;隐藏对象保留占据的物理空间，后者会消耗更多资源。
3、border:none;与border:0;的区别：使用border:none;不保留空间，而border:0;虽然可以隐藏掉边框，但保留bordercolor/borderstyle的使用权。
4、不宜用过小的背景图片平铺：避免使用宽高8px以下的平铺背景图片，因为它们会导致大量重复平铺，影响渲染效率。
5、慎用IE滤镜：IE的滤镜消耗资源且存在兼容性问题，建议采用GIF或JPG似透非透的办法来避免使用此滤镜。
6、{ margin:0; padding:0;}避免浏览器样式差异：有选择性地使用通配符控制内外填充样式，避免对所有标签都初始化一遍。
7、不要添加额外的标签来描述class或id：如果选择器以id作为关键选择符，请不要添加多余标签名上去，因为ID是唯一的。
8、尽量选择最特殊的类来存放选择器：通过添加class到元素，将类别进行再细分为class类，避免为了一个标签浪费时间去匹配过多的选择符。
9、避免子孙选择符：子孙选择符是CSS中最耗资源的选择符，很多情况中，我们真正想要的是子选择符。
10、标签类中不要包含子选择符：不要在标签类中使用子选择符，否则每次元素的出现，都会额外地增加匹配时间。
11、留意所有子选择符的使用：小心地使用子选择符，如果你能想出一个的不使用他的方法，那么就不要使用。
以下是两个相关的FAQs：
1、问：为什么应该避免使用小写字母或省略成3位数的十六进制颜色值？
答：因为这种写法没有确实的数据证明对浏览器的渲染效率是否有影响，而十六进制的颜色值默认标准是大写及6位数标注，在未知情况下不希望冒险而降低了渲染的效率。
2、问：为什么应该避免使用子孙选择符？
答：因为子孙选择符是CSS中最耗资源的选择符，尤其是在选择器使用标签类或通用类的时候，很多情况中，我们真正想要的是子选择符，除非有明确说明，在UI CSS中是严禁使用子孙选择符的。
| 序号 | 注意点 |
| 1 | 使用 |
| 2 | 尽量减少CSS文件的大小，合并和压缩CSS文件。 |
| 3 | 使用CSS选择器时，避免过度使用复杂选择器，尽量使用类选择器。 |
| 4 | 避免使用通配符选择器 |
| 5 | 使用CSS的transform和opacity属性进行动画处理，它们不会触发页面的重排（reflow）和重绘（repaint）。 |
| 6 | 使用willchange属性为将要变化的元素设置一个提示，以便浏览器提前做好优化准备。 |
| 7 | 使用CSS的calc()函数进行计算，避免多次计算。 |
| 8 | 使用CSS的@media查询实现响应式设计，避免在移动端使用过多的媒体查询。 |
| 9 | 避免使用table布局，尽量使用flex或grid布局。 |
| 10 | 使用CSS的fontdisplay属性控制字体加载，避免字体加载导致的空白问题。 |
| 11 | 监控CSS的性能，使用浏览器的开发者工具分析渲染过程，找出性能瓶颈。 |
