Reactjs 是什么导致Safari上出现此警告&引用；这个网页使用了大量的能量。关闭它可能会提高Mac的响应能力”；

我们有一个React网站，运行着大量高质量的图像，这些图像一直在经历这一警告。如何开始在Safari上调试此警告消息？有没有具体的原因

---

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

改进注意事项：

• 使渲染代码尽可能高效

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

• 在可能的情况下（出于许可和更新考虑），将9个外部脚本包含到上述单个文件中。轻微改善

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

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

---

图像的数量不是问题所在。这是SVG图像（加载）的数量和导致问题的脚本。

在Chrome中打开页面，打开开发工具，然后切换到“性能选项卡”

然后使用左边的第二个图标-看起来像“重新加载”按钮的图标。上面写着“开始分析并重新加载页面”

你会有一个完整的关于什么是采取多少。您可以在顶部看到什么正在消耗FPS和CPU，然后您可以选择负载特别高的时间段

在底部，然后选择“调用树”或“自底向上”选项卡，以了解哪些脚本和函数调用会导致性能问题

通常，“正常”网站（例如，非游戏）不会有很多框架重画。然后，您可以发现加载微调器是否使用javascript而不是转换和转换设置动画；有时它们仍然在渲染，尽管它们无法触及

---

关于React-specific注意事项：另外使用检查也可能有意义。例如，您可能能够发现子帧是否无缘无故地不断重新渲染。

这些图像的大小以及如何在应用程序中加载？