css性能优化

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

1.合理安排选择器（选择器瘦身）；

2.高消耗属性？--》绘制前需要浏览器进行大量计算：

border-raduis,transforms,box-shadows,transparency,cssfilters(性能杀手)

css的优化：避免过分重绘,避免过分重排（浏览器重新计算布局位置和大小）,慎重选择高消耗的样式;

浏览器重新计算布局位置与大小

常见的重排元素：

width,height;padding;margin;display;border;top:position;font-size;font-size;text-align;

避免过度的重绘：

常用的重绘元素:

color,borrder-style,visibility,backgorund,text-decoration,bavkground-image,background-repeat,borddr-radius,outline-color,box-shadow,background-size;

css will change：思路是，把GPU利用起来（在移动端要慎重选择）

requestAnimationFrame:让视觉更新按照浏览器的最优时间来安排计划：60fps,取代setTimeout和setInterval hack

避免过分重排（浏览器重新计算布局位置和大小）

搜索w3c的性能优化新规范

用测试数据判断优化策略