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

2022-01-19 00:00:00 performance frontend javascript

我用一张大图(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 兆像素的图像投入其中，它就会立即发生.

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.

相关文章