transform:translateZ(0),will-change GPU加速原理动画实现_transform: translatez(0)

作者：alg789 | 2024-02-05 09:51:43

踩

transform: translatez(0)

浏览器渲染

提高动画的优化不得不提及浏览器是如何渲染一个页面。在从服务器中拿到数据后，浏览器会先做解析三类东西：

解析html,xhtml,svg这三类文档，形成dom树。
解析css，产生css rule tree。
解析js，js会通过api来操作dom tree和css rule tree。

解析完成之后，浏览器引擎会通过dom tree和css rule tree来构建rendering tree：

rendering tree和dom tree并不完全相同，例如：<head></head>或display:none的东西就不会放在渲染树中。
css rule tree主要是完成匹配，并把css rule附加给rendering tree的每个element。

在渲染树构建完成后，

浏览器会对这些元素进行定位和布局，这一步也叫做reflow或者layout。
浏览器绘制这些元素的样式，颜色，背景，大小及边框等，这一步也叫做repaint。
然后浏览器会将各层的信息发送给GPU，GPU会将各层合成；显示在屏幕上。

reflow => repaint => composite
1

reflow和repaint都是耗费浏览器性能的操作,为了仅发生composite，我们做动画的css property必须满足以下三个条件：

不影响文档流。
不依赖文档流。
不会造成重绘。

满足以上以上条件的css property只有transform和opacity。

这样做有两个优势：

动画将会非常流畅
动画不在绑定到CPU，即使js执行大量的工作；动画依然流畅。

GPU有2个问题：

一个或多个没有自己复合层的元素要出现在有复合层元素的上方，它就会拥有自己的复合层；这种情况被称为隐式合成。

使用GPU动画需要发送多张渲染层的图像给GPU，GPU也需要缓存它们以便于后续动画的使用。

优化技巧

保持动画的对象的z-index尽可能的高。理想的，这些元素应该是body元素的直接子元素。当然，这不是总可能的。所以你可以克隆一个元素，把它放在body元素下仅仅是为了做动画。
将元素上设置will-change CSS属性，元素上有了这个属性，浏览器会提升这个元素成为一个复合层（不是总是）。这样动画就可以平滑的开始和结束。但是不要滥用这个属性，否则会大大增加内存消耗。

用css动画而不是js动画

css动画有一个重要的特性，它是完全工作在GPU上。因为你声明了一个动画如何开始和如何结束，浏览器会在动画开始前准备好所有需要的指令；并把它们发送给GPU。而如果使用js动画，浏览器必须计算每一帧的状态；为了保证平滑的动画，我们必须在浏览器主线程计算新状态；把它们发送给GPU至少60次每秒。除了计算和发送数据比css动画要慢，主线程的负载也会影响动画；当主线程的计算任务过多时，会造成动画的延迟、卡顿。

所以尽可能地使用基于css的动画，不仅仅更快；也不会被大量的js计算所阻塞。

总结：使用transform 和 will-change能开启GPU。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/alg789/article/detail/60301

transform:translateZ(0),will-change GPU加速原理 动画实现_transform: translatez(0)

浏览器渲染

优化技巧

transform:translateZ(0),will-change GPU加速原理动画实现_transform: translatez(0)