為什么硬件加速的 CSS 動畫在主線程中花費太多的“復合層”時間？

Question

我使用一張大圖（33440 x 440）並轉換大圖，然后實現像幀動畫一樣的動畫； 我還使用 translate3D 來獲得 GPU 加速，

簡化代碼如下：

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

眾所周知，復合層的工作將轉移到GPU上； 但是在性能的chrome devtools中，主線程中復合層的任務花費了太多時間：（解碼圖像發生在光柵線程中而不是主線程中）

那么為什么以及任務composite layers在主線程中做了什么？

Answer 1

問題是你的形象是巨大的。 “合成層”大致是指以正確的順序和位置將頁面上的所有元素（層）相互疊加渲染，如果這些層很大，這將需要很長時間。 僅僅因為它發生在 GPU 上並不意味着如果您將 14 兆像素圖像放入其中，它會立即發生。