码迷,mamicode.com
首页 > Web开发 > 详细

谈谈CSS性能

时间:2017-11-09 00:49:41      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:transform   enc   family   优化   cal   位置   min   image   rms   

CSS性能优化

1、衡量属性和布局的消耗代价;

2、探索W3C的性能优化新规范;

3、用测试数据判断优化策略。

 

慎重选择高消耗的样式

1、box-shadows;

2、border-radius;

3、transparency;

4、transforms;

5、CSS fitters(性能杀手)。

 

避免过分重排(Reflow  浏览器重新计算布局位置与大小)

常见的重排元素:

width height padding margin
display border-width border top
position font-size float text-align
overflow-y font-weight overflow left
font-family line-height vertical-align right
clear white-space bottom min-height

 

避免过分重绘(Repaints)

常见的重绘元素:

color border-style visibility background
text-decoration background-image background-position background-repeat
outline-color outline outline-style border-radius
outline-width box-shadow background-size  

 

谈谈CSS性能

标签:transform   enc   family   优化   cal   位置   min   image   rms   

原文地址:http://www.cnblogs.com/fengxiongZz/p/7807006.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!