站长资讯网
最全最丰富的资讯网站

css优化,提高性能的方法有哪些

方法:1、压缩css,减少文件体积;2、使用link引入css文件;3、合理设计CSS布局,注意复用样式,减少渲染上花的时间;4、少用“*”选择器;5、慎用浮动、定位等高性能属性;6、尽量减少页面重排、重绘;7、属性值为0时,不加单位等等。

css优化,提高性能的方法有哪些

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

CSS优化主要是4个方面:

  • 加载性能

    主要是从减少文件体积,减少阻塞加载,提高并发方面入手

  • 选择器性能

  • 渲染性能

  • 可维护性、健壮性

下面给大家具体介绍一下。

加载性能:

1、css压缩:将写好的css进行打包压缩,可以减少很多的体积;

2、css单一样式:当需要下边距和左边距的时候,

很多时候选择:margin: top 0 bottom 0;

margin-bottom: bottom;margin-left: left;执行的效率更高;

3、减少使用 @import, 而建议使用link, 因为后者在页面加载时一起加载,前者是等待页面加载完成之后再进行加载;

4、合理设计CSS 布局,注意复用样式,减少渲染上花的时间。class和ID的选择,少用*这种全局匹配,合理设置基本样式(如设置table{})提高复用。

选择器性能:

CSS选择符是从右到左进行匹配的。当使用后代选择器的时候,浏览器会遍历所有子元素来确定是否是指定的元素等等;

**避免使用通配规则**

如*{} 计算次数惊人!只对需要用到的元素进行选择

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

如:#nav li{},可以为li加上nav_item的类名,如下选择.nav_item{}

**不要去用标签限定ID或者类选择符**

如:ul#nav,应该简化为#nav

**尽量少的去使用后代选择器,降低选择器的权重值**

后代选择器的开销是最高的,尽量将选择器的深度降到最低,最高不要超过三层,

赞(0)
分享到: 更多 (0)