是什么导致Safari出现此警告？ “此网页耗费了大量精力。关闭该网页可能会改善Mac的响应速度”

Question

我们有一个React网站运行着很多高质量的图像，并且一直在发生这种警告。您如何开始在Safari上调试此警告消息？是否有导致此的特定原因？

Answer 1

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

改进说明：

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

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

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

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

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

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

Answer 2

在Chrome中打开页面，打开开发人员工具，然后切换到“性能”标签。

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

您将获得全部费用的完整摘要。您可以在顶部查看正在消耗FPS和CPU的内容，然后选择负载特别高的时间范围。

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

通常，“正常”网站（例如非游戏网站）不会有很多框架重绘。然后，您可以确定是否使用JavaScript为加载的微调框设置了动画，而不是使用变换和过渡；有时它们仍然无法渲染，尽管它们仍然无法渲染。

在React上，请注意：额外使用React Developer Tools检查它也是有意义的。例如。您也许可以发现子帧是否无故不断地重新渲染。