谈谈CSS性能

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