javascript - 如何尽可能快地加载 JavaScript 画布动画？

Question

我有一个 wordpress 网站，我添加了相当多的自定义代码。

该网站的加载速度相当快。但是，在主页上，我们将particle.js 动画应用于背景画布。

应用粒子的相关代码见这里：

jQuery("particles2").ready(function( $ ){
      if(!window.isMobile && document.getElementById('particles2') != null) {
    desktopParticles();
  }
});

其中“particles2”是我们在其上应用粒子的元素的 ID。

如果您观察页面的加载，您会看到主页似乎加载得很快，不到一秒，但是particles.js 动画需要几秒钟才能生效（大概它似乎与 JS 的其余部分一起运行在页面上）。

我认为将 .ready 事件侦听器添加到相关 DIV 会在 DOM 上可用的第二个 div 应用粒子动画。但是，动画的应用似乎与最终页面加载几乎相同。

尽快应用particles.js 动画的最佳方式是什么，最好是在相关背景div 在DOM 上可用之后立即应用？

注意：这是一个 wordpress 站点，所以不幸的是我没有太多直接访问 HTML 的权限，因此内联脚本很可能是不可能的，除非有一种我不知道的技术可以这样做

谢谢！

标签： javascriptjquerywordpressperformancecanvas