WebGL 动画优化

Question

我有一个使用 SVG 动画库 (Vanta.js) 的简单 React 应用程序，而 Vanta.js 本身在后台使用了三个.js。

我在 Google PageSpeed Insights、GtMetrix、Pingdom 等上测试了我的网站性能。我的页面加载时间低于 3 秒，总页面大小低于 250kb，总请求数为 10，因此我的整体性能得分为 85+。

但是，Google PageSpeed Insight 说的却完全不同（得分：30）：

速度指数：5s

互动时间：35 秒

第一个 CPU 空闲：35 秒

主要问题：

• 尽量减少主线程工作（不详解）
• 高效的缓存策略（适用于我的所有资产）
• 减少 JS 执行时间（vanta.js 库和整个 webpack 包）

我将 CDN 用于 JS 库（Vanta 和 Three），没有任何改变。现在，我导入了 js 库，并没有从 CDN 中获取它们。我用@font-face 导入了一个谷歌字体。我还可以做些什么？我认为主要问题是关于 SVG 动画库或 SVG。

Answer 1

根据我的经验，vantajs 是真正的性能杀手。我目前正在编写一个使用 vanta 的 rails 应用程序，当我删除库时，我的速度指数增加了 20。可能您已经在处理下一个项目，但尝试系统地删除某些库以找出问题的根源。