21. CSS 优化和提高性能的方法有哪些？

21. CSS 优化和提高性能的方法有哪些？

加载性能

• css 压缩, 将写好的 css 进行打包压缩, 可以减小文件体积
• css 单一样式, 当需要下边距和左边距的时候, 很多时候会选择使用 margin: top 0 bottom 0; 但 margin-bottom: bottom; margin-left: left; 执行效率会更高
• 减少使用 @import, 建议使用 link, 因为后者在页面加载时一起加载, 前者是等待页面加载完成之后再进行加载

选择器性能

• 关键选择器(key selector)。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)。CSS 选择符是从右到左进行匹配的。当使用后代选择器的时候, 浏览器会遍历所有子元素来确定是否是指定的元素等等
• 如果规则拥有ID选择器作为其关键选择器, 则不要为规则增加标签。过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了)
• 避免使用通配规则, 如 *{} 计算次数惊人, 只对需要用到的元素进行选择
• 尽量少地去对标签进行选择, 而是用 class
• 尽量少地去使用后代选择器, 降低选择器的权重值。后代选择器的开销是最高的, 尽量将选择器的深度降到最低, 最高不要超过三层, 更多的使用类来关联每一个标签元素
• 了解哪些属性是可以通过继承而来的, 然后避免对这些属性重复指定规则

渲染性能

• 慎重使用高性能属性: 浮动、定位
• 尽量减少页面重排、重绘
• 去除空规则: {}。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少 css 文档体积
• 属性值为 0 时, 不加单位
• 属性值为浮动小数 0.**, 可以省略小数点之前的 0
• 标准化各种浏览器前缀: 带浏览器前缀的在前。标准属性在后
• 不使用 @import 前缀, 它会影响 css 的加载速度
• 选择器优化嵌套, 尽量避免层级过深
• css 雪碧图, 同一页面相近部分的小图标, 方便使用, 减少页面的请求次数, 但是同时图片本身会变大, 使用时, 优劣考虑清楚, 再使用
• 正确使用 display 的属性, 由于 display 的作用, 某些样式组合会无效, 徒增样式体积的同时也影响解析性能
• 不滥用 web 字体。对于中文网站来说 WebFonts 可能很陌生, 国外却很流行。web fonts 通常体积庞大, 而且一些浏览器在下载 web fonts 时会阻塞页面渲染损伤性能

可维护性、健壮性

• 将具有相同属性的样式抽离出来，整合并通过 class 在页面中进行使用, 提高 css 的可维护性
• 样式与内容分离: 将 css 代码定义到外部 css 中