为什么硬件加速的CSS动画花费太多的“复合层"?主线程中的时间?

问题描述

我使用一张大图片(33440 x 440)并变换大图像，然后实现类似于帧动画的动画；而且我还使用了translate3D来获得GPU加速，

I use a big picture(33440 x 440) and transform the big image, then achieve a animation like as frame animation; and also I use the translate3D to get a GPU Acceleration,

下面的简化代码:

  @keyframes testName {
    0% { transform: translate3d(0,0,0); }
    100% { transform: translate3d(-33440px,0,0); }
  }

我们知道，复合层的工作将转移到GPU.但是在性能的chrome devtools中，主线程中的复合层任务花费了太多时间:(解码图像发生在光栅线程而不是主线程中)

as we know, the work of composite layers will move to GPU; but in chrome devtools of performance, the task of composite layers in main thread cost too much time:(decode image happens in raster thread not in main thread)

那为什么任务复合层在主线程中做了什么?

so why and what the taskcomposite layers did in main thread?

推荐答案

问题是您的图片很大.合成层"粗略地表示以正确的顺序和位置将页面上的所有元素(层)彼此呈现，如果这些层巨大，则将花费很长时间.仅仅因为它发生在GPU上并不意味着如果您将14兆像素的图像放入GPU中，它将立即发生.

The problem is that your image is HUGE. "Compositing layers" roughly means rendering all of the elements (layers) on the page on top of each other in the correct order and location, which will take a long time if these layers are gigantic. Just because it's happening on the GPU doesn't mean it will happen instantly if you throw a 14 megapixel image into it.

这篇关于为什么硬件加速的CSS动画花费太多的“复合层"?主线程中的时间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！