页面加载期间背景位置动画（占位闪烁/骨架加载器）停止

Question

我正在使用占位符微光效果（骨架加载器）来代替加载时的数据表。从服务器检索数据表数据并将其传递给主功能，该功能1）隐藏微光2）执行几次dom更新3）初始化数据表4）初始化数据表编辑器（按此顺序）。不幸的是，当执行击中此功能时，微光会冻结两秒钟。

很明显，就启动数据表，编辑器插件以及dom写入而言，这是相当大的资源使用。但是，我的理解是CSS动画等现在由Chrome在不同的线程中处理，因此不应该发生这种情况。

我确实尝试过在Codepen中重新创建，但是仅通过基本数据表初始化就不会停止闪烁-也许这是资源使用情况？谁能建议可能会发生什么？预先感谢

正在使用的HTML由几行

组成

@keyframes placeHolderShimmerSmall {
  0% {
    background-position: -500px 0
  }
  100% {
    background-position: 500px 0
  }
}

.animated-background {
  will-change: transform, opacity;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmerSmall;
  animation-timing-function: linear;
  background: $skeletonLightGrey;
  background: linear-gradient(to right, #eeeeee 10%, #dddddd 18%, #eeeeee 33%);
}

<div class="d-flex contents-table-loading-row">
  <div class="animated-background contents-table-loading">
  </div>
  <div class="animated-background contents-table-loading">
  </div>
  <div class="animated-background contents-table-loading">
  </div>
  <div class="animated-background contents-table-loading">
  </div>
  <div class="animated-background contents-table-loading">
  </div>
  <div class="animated-background contents-table-loading">
  </div>
</div>