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

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

尽管描述称它是轻量级的，但使用它会显著影响我的PageSpeed Insights分数。例如，看看For，这很简单。由于页面的简单性，总分相当不错，但渲染和脚本计算时间都很高

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

我可以使用什么方法来最小化如此沉重的视觉效果脚本所带来的影响？例如，如果设备的功能足够强大，我可以只加载效果吗？是否可以取消效果的优先级，这样任何延迟都不会影响页面的其余部分

---

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

使用requestAnimationFrame（以及使用它的库）将始终增加渲染和脚本计算时间。这不一定是坏事，但您并不总是能够控制外部库

一个选项是向动画添加层。这样做会给动画增加很少的开销，但如果帧速率开始下降，则会取消动画：

它看起来像这样：

让startTime=Performance.now（）//精确的开始时间
const animation=new MyAnimationLib（）
const updateLoop=newTime=>{
常数增量=新时间-开始时间
开始时间=新时间
如果（增量>1000/60）{
animation.cancel（）//60 fps min以保持动画运行
返回//退出循环
}
requestAnimationFrame（updateLoop）
}
//开始监视动画
requestAnimationFrame（updateLoop）

谢谢！这是一个很有希望的想法。有件事我不明白。您正在引用的

Animation（）

对象如何链接到我的库？它怎么知道你要它取消什么？

animation.cancel（）

如何影响我创建的库实例？我应该更具体一些。动画表示动画库。图书馆给你提供了取消效果的方法吗？哦，我明白了。我感到困惑，因为

动画

是一种东西。我应该把这些点连起来。大多数人都有一种方法来破坏这种效果。示例中的一个并不显式，但是删除它的画布应该可以做到这一点。谢谢我将更新以使这更清楚。谢谢阿里安！对于这个特定的库，情况可能是这样，也可能不是这样，但让我们假设没有更好的库*嗯。。。TSP粒子