Skip to content
登录后刷题更便捷

CSS 优化、提高性能的方法有哪些?

难度:

加载性能:

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

选择器性能:

  1. 关键选择器(key selector)。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)。CSS 选择符是从右到左进行匹配的。当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元素等等;

  2. 如果规则拥有 ID 选择器作为其关键选择器,则不要为规则增加标签。过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了)。

  3. 避免使用通配规则,如*{}计算次数惊人!只对需要用到的元素进行选择。

  4. 尽量少的去对标签进行选择,而是用 class。

  5. 尽量少的去使用后代选择器,降低选择器的权重值。后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,更多的使用类来关联每一个标签元素。

  6. 了解哪些属性是可以通过继承而来的,然后避免对这些属性重复指定规则。

渲染性能:

  1. 慎重使用高性能属性:浮动、定位。

  2. 尽量减少页面重排、重绘。

  3. 去除空规则:{}。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少 css 文档体积。

  4. 属性值为 0 时,不加单位。

  5. 属性值为浮动小数 0.**,可以省略小数点之前的 0。

  6. 标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后。

  7. 不使用@import 前缀,它会影响 css 的加载速度。

  8. 选择器优化嵌套,尽量避免层级过深。

  9. css 雪碧图,同一页面相近部分的小图标,方便使用,减少页面的请求次数,但是同时图片本身会变大,使用时,优劣考虑清楚,再使用。

  10. 正确使用 display 的属性,由于 display 的作用,某些样式组合会无效,徒增样式体积的同时也影响解析性能。

  11. 不滥用 web 字体。对于中文网站来说 WebFonts 可能很陌生,国外却很流行。web fonts 通常体积庞大,而且一些浏览器在下载 web fonts 时会阻塞页面渲染损伤性能。

可维护性、健壮性:

  1. 将具有相同属性的样式抽离出来,整合并通过 class 在页面中进行使用,提高 css 的可维护性。
  2. 样式与内容分离:将 css 代码定义到外部 css 中。
详细资料可以参考:

内容仅供参考,难免有不恰当的地方,如果有问题欢迎及时反馈
部分内容来自网络,如果不慎侵犯您的权益,请联系我们,以便及时删除侵权内容