您的位置:首页> 日志> 前端技术 正文
DTOP

忽略的CSS优化

chenke | 2016年03月31日 |

>>收藏本文 已有 0条评论

1、尽量避免写在HTML标签中写Style属性。

2、避免CSS表达式,CSS表达式的执行需跳出CSS树的渲染。

3、移除空的CSS规则,空的CSS规则增加了CSS文件的大小,且影响CSS树的执行。

4、正确使用Display的属性,Display属性会影响页面的渲染。 (1)display:inline后不应该再使用width、height、margin、padding以及float (2)display:inline-block后不应该再使用float (3)display:block后不应该再使用vertical-align (4)display:table-*后不应该再使用margin或者float

5、不滥用Float,Float在渲染时计算量比较大,尽量减少使用。

6、不滥用Web字体,Web字体需要下载,解析,重绘当前页面。

7、不声明过多的Font-size,过多的Font-size引发CSS树的效率。

8、值为0时不需要任何单位,为了浏览器的兼容性和性能,值为0时不要带单位。

9、避免让选择符看起来像正则表达式。

10、标准化各种浏览器前缀 (1)、无前缀应放在最后。 (2)、CSS动画只用(-webkit- 无前缀)两种即可。 (3)、其它前缀为“-webkit- -moz- -ms-无前缀”四种 

11.压缩好后的CSS .test{ background-color:#ffffff; background-image:url(a.jpg); } 改变成如下 .test{ background-color:#ffffff; background-image:url(a.jpg);}

12.合写CSS .test{ background-color: #000; background-image: url(image.jpg); background-position: left top; background-repeat: no-repeat; } .test{ background: #000 url(image.jpg) top left no-repeat; }

13.CSS放在head中,减少repaint和reflow

14.避免适用通配符或隐式通配符,比如:body * {padding:0;margin:0;}