javascript - 我可以优化库中的重主线程 JavaScript 视觉效果吗？

Question

通常，我尝试使用 CSS 制作所有视觉效果。但有时，无论是明确的客户端请求还是因为所需的效果对于 CSS 来说太复杂，我需要使用 JS 库。一个这样的例子是 Particles.js .

尽管描述称它是轻量级的，但使用它会显着影响我的 PageSpeed Insights 分数。例如，看一下 the Insights对于 the library's demo page ，这非常简单。由于页面简单，总体得分相当不错，但渲染和脚本评估时间都很高。

如果我对库本身没有任何控制权，并且没有更高效的库可用*，我可以采取什么措施来提高性能？

我可以使用什么方法来最大程度地减少如此繁重的视觉效果脚本的影响？例如，我可以仅在设备足够强大来处理效果时加载效果吗？是否可以取消效果的优先级，以便任何延迟都不会影响页面的其余部分？

*对于这个特定的库来说，情况可能是这样，也可能不是，但我们假设没有更好的库。

Answer 1

使用requestAnimationFrame(以及使用它的库)总是会增加渲染和脚本评估时间。这不一定是坏事，但您并不总是能够控制外部库。

一个选项是向动画添加一个图层。像这样的事情只会给动画增加很少的开销，但如果帧速率开始下降，则会取消它:

它看起来像这样:

let startTime = Performance.now() // precise start time
const animation = new MyAnimationLib()
const updateLoop = newTime => {
  const delta = newTime - startTime
  startTime = newTime
  if (delta > 1000 / 60) { 
    animation.cancel() // 60 fps min to keep running animation
    return // exit the loop
  }
  requestAnimationFrame(updateLoop)
}

// Start monitoring the animation
requestAnimationFrame(updateLoop)