CODEWITHSUNDEEP
javascriptperformancefrontend
SKing7
SKing7

Reputation: 2356

Why Hardware-Accelerated CSS animation cost too much "composite layer" times in main thread?

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,

simplified code below:

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

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) enter image description here enter image description here

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

Upvotes: 1

Views: 781

Answers (1)

laptou
laptou

Reputation: 6981

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.

Upvotes: 1

Related Questions