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

Question

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

尽管描述说它是轻量级的，但使用它会显着影响我的 PageSpeed Insights 分数。例如，看一下 the Insights for 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)

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

Can I optimize a heavy main-thread JavaScript visual effect from a library?

javascript

performance

particles

html5-canvas

particles.js