在运行的时候即使是在电脑浏览器上也会隐约觉得动画的运行并不流畅,更不要提在移动端达到60fps的流畅效果了。这是因为top和left的改变会触发浏览器的reflow和repaint,整个动画过程都在不断触发浏览器的重新渲染,这个过程是很影响性能的。
为了解决这个问题,我们使用transform中的translate()来替换top和left
这个时候我们就会发现整个动画效果流畅了很多,在动画移动的过程中也没有发生repaint和reflow。那么为什么transform没有出发repaint呢?原因就是transform动画由GPU控制,支持硬件加速,并不需要软件方面的渲染。
浏览器收到页面文档后,会将文档中的标记语言解析为DOM树,DOM和CSS结合后形成浏览器构建页面的渲染树,渲染树中包含了大量的渲染元素,每一个渲染元素会被分到一个图层中,每个又会被加载到GPU形成渲染纹理,而图层在GPU中transform是不会触发repaint的,这一点非常类似3D绘图功能,最终这些使用transform的图层都会使用独立的合成器进程进行处理,移动时的变化也是独立的,不会影响到页面的其他元素,造成重排重绘是因为影响到页面的其他图层元素导致的,可以理解为其他元素都是在一个图层空间,所以一个图层移动其他的也会收到影响,而transform创建了一个新的复合图层,它会被GPU独立执行transform操作,跟其他图层互不影响,所以不会引起重排重绘。
此时,你也许会问浏览器什么时候会创建一个独立的复合图层呢?事实上一般是在以下几种情况下:
因为GPU进程会为其开启一个新的复合图层,不会影响默认复合图层(就是普通文档流),所以并不会影响周边的 DOM 结构,而属性的改变也会交给 GPU 处理,不会进行重排。使 GPU 进程开启一个新的复合图层的方式还有 3D 动画,过渡动画,以及 opacity 属性,还有一些标签,这些都可以创建新的复合图层。这些方式叫做硬件加速方式。你可以想象成新的复合图层和默认复合图层是两幅画,相互独立,不会彼此影响。降低重排的方式:要么减少次数,要么降低影响范围,创建新的复合图层就是第二种优化方式。绝对布局虽然脱离了文档流,但不会创建新的复合图层,因此当绝对布局改变时,不会影响普通文档流的 render tree,但是依然会绘制整个默认复合图层,对普通文档流是有影响的。普通文档流就是默认复合图层,不要介意我交换使用它们如果你要使用硬件加速方式降低重排的影响,请不要过度使用,创建新的复合图层是有额外消耗的,比如更多的内存消耗,并且在使用硬件加速方式时,配合 z-index 一起使用,尽可能使新的复合图层的元素层级等级最高。
(1)transform
(2)opacity
(3)filter
(1)内存。如果GPU加载了大量的纹理,那么很容易就会发生内存问题,这一点在移动端尤为明显。
(2)使用GPU渲染会影响字体的抗锯齿效果。这是因为GPU和CPU具有不同的渲染机制,即使最终硬件加速停止了,文本还是会在动画期间显示的很模糊。
1、transform会使用GPU硬件加速,性能更好,position + top/left会触发大量的重排重绘,性能影响较大。
2、硬件加速的工作原理是创建一个新的复合图层,然后使用合成线程进行渲染
3、3D和2D动画的区别,2D动画会在动画开始和动画结束时触发2次重新渲染
4、使用了GPU可以优化动画小故宫但是不要滥用,会有内存问题
5、理解强制触发硬件加速的transform技巧,使用对GPU友好的CSS属性
参考文章: https://zhuanlan.zhihu.com/p/78230297
el-scrollbar是elementui自带的页面滚动条,如果用页面滚动条,我们发现在ie浏览器下卡顿很明显,但是用el-scrollbar滚动页面就会感觉会流畅很多,因为页面滚动会引发重排重绘,但是el-scrollbar是用transform不会引起,所以用el-scrollbar会感觉流畅很多,转订单去掉overflow:hidden就会流畅是因为这个样式会覆盖el-scrollbar的样式,
1.javascript/css设置动画或变换
2.【计算样式】
根据css选择器,对每个DOM元素匹配对应的CSS样式。
从而确定每个DOM元素上应该应用什么CSS样式规则。
3.【布局】
计算每个DOM元素最终在屏幕上显示的大小和位置。
4.【绘制】
本质上就是填充像素的过程。
包括绘制文字、颜色、图像、边框和阴影等,也就是一个DOM元素所有的可视效果。
一般来说,这个绘制过程是在多个层上完成的。
5.【渲染层合并】
在每个层上完成绘制过程之后,浏览器会将所有层按照合理的顺序合并成一个图层,
然后在屏幕上呈现。
1.调整窗口大小
2.改变字体
3.增加或者移除样式表
4.内容变化
5.激活CSS伪类
6.操作CSS属性
7.JavaScript操作DOM
8.计算 offsetWidth和 offsetHeight
9.设置 style 属性的值
10.CSS3 Animation或Transition
1.页面首次加载
2.DOM元素添加、修改(内容)和删除(Reflow + Repaint)
3.仅修改DOM元素的颜色
4.应用新的样式或修改任何影响元素外观的属性
5.Resize浏览器窗口和滚动页面
6.读取元素的某些属性( offsetLeft、 offsetTop、 offsetHeight、 offsetWidth、 getComputedStyle() 等)
注:动画效果优选transform、opacity属性,因为二者不会造成页面的重排或重绘。
【生成独立RenderLayer的情况】
1.页面的根节点的RenderObject
2.有明确的CSS定位属性( relative , absolute 或者 transform )
3.是透明的
4.有CSS overflow、CSS alpha遮罩(alpha mash)或者CSS reflection
5.有CSS 滤镜(fliter)
6.3D环境或者2D加速环境的canvas元素对应的RenderObject
7.video元素对应的RenderObject
【生成独立GraphicsLayer的情况】
1.有3Dtransform或者perspective的CSS属性的层
2.使用加速视频解码的video元素的层
3.3D或者加速2D环境下的canvas元素的层
4.插件,比如flash
5.对 opacity 和 transform 应用了CSS动画的层
6.使用了加速CSS滤镜(filters)的层
7.有合成层后代的层
8.同合成层重叠,且在该合成层上面(z-index)渲染的层
9.有backface-visibility属性的层
10.will-change:transform的层
注:过多的GraphicsLayer会造成过大的内存消耗,特别对移动端性能影响较大,注意适度使用
1.【减少重排/重绘】DOM 的多个读操作(或多个写操作),应该放在一起。不要两个读操作之间,加入一个写操作。
2.【减少重排】如果某个样式是通过重排得到的,那么最好缓存结果。避免下一次用到的时候,浏览器又要重排。
3.【减少重排/重绘】不要一条条地改变样式,而要通过改变class,或者csstext属性,一次性地改变样式。
4.【减少重排/重绘】尽量使用离线DOM,而不是真实的网面DOM,来改变元素样式。比如,操作Document Fragment对象,完成后再把这个对象加入DOM。再比如,使用 cloneNode() 方法,在克隆的节点上进行操作,然后再用克隆的节点替换原始节点。
5.【减少重排/重绘】先将元素设为display: none(需要1次重排和重绘),然后对这个节点进行100次操作,最后再恢复显示(需要1次重排和重绘)。这样一来,你就用两次重新渲染,取代了可能高达100次的重新渲染。
6.【生成独立的RenderLayer】position属性为absolute或fixed的元素,重排的开销会比较小,因为不用考虑它对其他元素的影响。
7.【减少重排/重绘】只在必要的时候,才将元素的display属性为可见,因为不可见的元素不影响重排和重绘。另外,visibility : hidden的元素只对重绘有影响,不影响重排。
8.使用虚拟DOM的脚本库,比如React等。
9.使用 window.requestAnimationFrame()、window.requestIdleCallback() 这两个方法调节重新渲染,优化js动画
10.【减少重排】left/top->translate width/height->scale,rotate,opacity
11.【生成独立的GraphicsLayer】尽可能多的利用硬件能力,开启GPU加速
12.尽可能少的使用box-shadows与gradients,二者过于耗性能
*动画性能优化方法持续整理中......