css性能优化

浏览器渲染流程

、 download html
download css download js
css rules tree domAPI
domTree
cssrulesTree cssomAPI
cssomTree
domTree cssomTree
renderTree
|
|
layout —> paint
(reflow) (repaint)
逻辑图（多层矢量图) ------>
实际绘制（栅格化）

reflow：
1.改变窗口大小
2.改变文字大小
3.内容的改变，输入框输入文字
4.激活伪类，如:hover
5.操作class属性
6.脚本操作dom
7.计算offsetWidth和offsetHeight
8.设置style属性
repaint：
如果只是改变某个元素的背景色、文字颜色、边框颜色，不影响他周围或内部布局的属性。
repaint 速度快于 reflow。

css3优化

提示浏览器用gpu加速：
opacity
transform：translate3d（） translatez（0）；
gpu加速 方法：
will-change：transform；

div:hover{    will-change: transform;}
div:active{    transform:scale(2, 3);}

最好在属性触发的前一刻提示浏览器。

浏览器刷新页面的频率为60次/秒

gpu 可以在一帧里渲染好页面，那么当你改动页面的元素或者实现动画的时候，将会非常流畅。