reactjs - 是什么导致 Safari 上出现此警告？“此网页正在消耗大量能量。关闭它可能会提高 Mac 的响应能力”

Question

我们有一个运行有大量高质量图像的 React 网站，这些图像一直在出现此警告。您如何开始在 Safari 上调试此警告消息？有没有具体的原因导致这种情况？

标签： reactjsperformancesafari

Answer 1

此消息是由监视页面上运行的 Javascript 脚本的 Safari 看门狗进程引起的。当脚本使用太多资源时，它会通知用户。当您的页面加载到我的计算机上时，CPU 利用率会提高到 68%。厌倦循环和自定义渲染代码。

改进说明：

• 使渲染代码尽可能高效。

• 将您的内部 Javascript 文件合并为一个文件，而不是 7 个文件。重大改进。

• 如果可能（出于许可和更新考虑）将 9 个外部脚本包含到上述单个文件中。小改进。

• 将主页拆分为不同的部分，作为单独的页面或使用 AJAX 动态加载。重大改进。

• 避免使用 svg 文件。SVG 文件需要大量的计算能力来栅格化和显示。这是 7 秒加载时间的主要原因。以最大的预期显示分辨率将文件转换为 png，并在需要更多细节时提供扩展的 SVG 文件（通过单击或延迟鼠标悬停）。重大改进。

图片的数量不是问题。它是 SVG 图像（加载时）的数量和导致问题的脚本。