浏览器处理动画顺序
- 获取dom:获得我们所有的dom树
- 分割图层:浏览器根据z-index,和脱离了原来dom层的dom解构进行分层。
- 计算样式:分解图层完毕后,将所有的图层批量进行样式计算。这里有些属性是CPU去计算的,有些属性是GPU去计算的,具体哪些,请看下文。
- reflow-relayout-paint set up-repaint:这一系列过程其实是页面从回流到重绘发生的步骤,这也是为什么回流必然引起重绘,而重绘却不一定要回流的原因。
- GPU:重绘后的“画布”交给GPU去处理。
- 组合布局:浏览器组合布局,然后页面就出现了。
重排属性relayout
1)盒子模型相关属性:
* width * height * padding * margin * display * border-width * border * min-height(width) * max-height(width) 等等。
2)定位和浮动
* top * bottom * left * right * position * float * clear
3)改变节点内部文字结构
* text-align * overflow-y * font-weight * overflow * font-family * line-height * vertical-align * white-space * font-size
重绘:
* color * border-style * border-radius * visibility * text-decoration * background * background-image * background-position * background-repeat * background-size * outline-color * outline * outline-style * outline-width * box-shadow
GPU加速 硬件加速
硬件加速是指将属性交给GPU处理,根本原因是创建了新的layer,属性改变直接由GPU处理,加快处理速度。使得有一些属性的改变可以略过relayout,减少浏览器在动画运行时所需要做的工作。
最常用的是3d转换(translate3d)。
缺点:GPU使用会增加内存消耗,同时也会影响字体的抗锯齿效果,导致文本在动画期间会显得有些模糊
什么情况下,浏览器会创建新的layer,开启GPU加速?
在webkit内核的浏览器中,如果有上述情况,则会创建一个独立的layer:
1)transform(3d转换)
2) video标签
3)混合插件(如 Flash)
4) isolation == isolate
5)opacity < 1
6)filter != normal
7)z-index != auto || 0 + 父元素display: flex|inline-flex
8) mix-blend-mode != normal
9)position == fixed || absolute
10)-webkit-overflow-scrolling == touch
11)will-change:指定可以形成新layer的元素。
其实,在css3中,最推荐的还是使用transform:translateZ(0);来创建一个新的layer,成本低,影响小。
除了GPU加速,还有一个比较好用的属性,可以告诉浏览器什么属性将会发生变化,让浏览器做好最佳处理:
will-change:存在兼容性问题。
transform3D和2D
首先transform和绝对定位都会产生新的图层,所以都不存在重排,图层在GPU中transform又不会引起重绘,这就是硬件加速的原理。另外,transform3D和2D的区别在于3D渲染前便会产生新的图层,而2D是在运行时产生图层,运行结束时删除图层。
https://www.cnblogs.com/shytong/p/5419565.html
https://www.jianshu.com/p/34da41b4a92f
https://blog.csdn.net/hsany330/article/details/50925260