首页 > 代码库 > CSS 优化、提高性能的方法

CSS 优化、提高性能的方法

  如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要总结有下面几点:

  1、尽量将样式写在单独的css文件里面,在head元素中引用

  有时候为了图方便或者快速搞定功能,我们可能会直接将样式写在页面的style标签或者直接内联在元素上,这样虽然简单方便,但是非常不利于日后的维护。将代码写成单独的css文件有几点好处:

  (1)内容和样式分离,易于管理和维护

  (2)减少页面体积

  (3)css文件可以被缓存、重用,维护成本降低

  2、不使用@import

  这条手段已经是众所周知,这里简单提一下,@import影响css文件的加载速度

  3、避免使用复杂的选择器,层级越少越好

  有时候项目的模块越来越多,功能越来越复杂,我们写的CSS选择器会内套多层,越来越复杂。

  建议选择器的嵌套最好不要超过三层,比如:

.header .logo .text{}

  可以优化成

.haeder .logo-text{}

  简洁的选择器不仅可以减少css文件大小,提高页面的加载性能,浏览器解析时也会更加高效,也会提高开发人员的开发效率,降低了维护成本。

 

  4、精简页面的样式文件,去掉不用的样式

  很多时候,我们会把所有的样式文件合并成一个文件,但是这样有一个问题:很多其他页面的CSS同时引用到当前页面中,而当前页面并没有用到它们,这种情况会造成两个问题:

  (1)样式文件偏大,影响加载速度

  (2)浏览器会进行多余的样式匹配,影响渲染时间。

  正确的处理方法是根据当前页面需要的css去合并那些当前页面用到的CSS文件。

 

  PS:合并成一个文件有一个优点:样式文件会被浏览器缓存,进入到其他页面样式文件不用再去下载。这条规则应根据场景来区别对待,如果是大项目,应该合并成不同的样式文件,如果是简单的项目,建议合并成一个文件即可。如果无法确认项目规模,建议分开成不同的样式文件,日后要合并也比较方便。

 

  5、利用CSS继承减少代码量

  我们知道有一部分CSS代码是可以继承的,如果父元素已经设置了该样式,子元素就不需要去设置该样式,这个也是提高性能的行之有效的方法。

  常见的可以继承的属性比如:

  color,font-size,font-family等等

  不可继承的比如:

  position,display,float等

 

  6、慎重使用高性能属性:浮动、定位;



 

CSS 优化、提高性能的方法