是什么导致 Safari 上出现此警告？ "This webpage is using significant energy. Closing it may improve the responsiveness of your Mac"
What causes this warning on Safari? "This webpage is using significant energy. Closing it may improve the responsiveness of your Mac"
我们有一个 React 网站 运行 很多高质量的图片都遇到了这个警告。您如何开始在 Safari 上调试此警告消息？是否有特定原因导致此问题？
此消息是由监视页面上 Javascript 脚本 运行 的 Safari 看门狗进程引起的。当脚本使用过多资源时，它会通知用户。当您的页面加载到我的计算机上时，CPU 利用率提高到 68%。厌倦了循环和自定义渲染代码。
改进说明：
使渲染代码尽可能高效。
将您的内部 Javascript 文件合并为一个文件，而不是 7 个文件。重大改进。
如果可能（出于许可和更新方面的考虑），请将 9 个外部脚本包含到上述单个文件中。小改进。
将主页分成不同的部分，作为单独的页面或使用 AJAX 动态加载。重大改进。
避免使用 svg 文件。 SVG 文件需要大量的计算能力来栅格化和显示。这是 7 秒加载时间的主要原因。以最大的预期显示分辨率将文件转换为 png，如果需要更多详细信息（通过单击或延迟鼠标悬停），则提供扩展的 SVG 文件。重大改进。
图像数量不是问题。这是导致问题的 SVG 图像（加载时）和脚本的数量。
打开Chrome中的页面，打开开发者工具，然后切换到"Performance tab"。
然后使用左起第二个图标 - 看起来像 "reload" 按钮的那个。其中说 "Start profiling and reload page".
您将全面了解哪些内容占用了多少。您可以在顶部看到什么正在消耗 FPS 和 CPU，然后您可以 select 负载特别高的时间范围。
然后在底部 select "Call Tree" 或 "Bottom-Up" 选项卡，以了解哪些脚本和函数调用会导致性能问题。
通常 "normal" 网站（例如非游戏）不会有很多帧重绘。然后，您可以发现例如加载微调器是否使用 javascript 动画，而不是转换和过渡；有时它们仍在重新渲染，尽管它们遥不可及。
关于 React 特定说明：使用 React Developer Tools 额外检查它也可能有意义。例如。您可能能够发现子帧是否无缘无故地不断重新渲染。
我们有一个 React 网站 运行 很多高质量的图片都遇到了这个警告。您如何开始在 Safari 上调试此警告消息？是否有特定原因导致此问题？
此消息是由监视页面上 Javascript 脚本 运行 的 Safari 看门狗进程引起的。当脚本使用过多资源时，它会通知用户。当您的页面加载到我的计算机上时，CPU 利用率提高到 68%。厌倦了循环和自定义渲染代码。
改进说明：
使渲染代码尽可能高效。
将您的内部 Javascript 文件合并为一个文件，而不是 7 个文件。重大改进。
如果可能（出于许可和更新方面的考虑），请将 9 个外部脚本包含到上述单个文件中。小改进。
将主页分成不同的部分，作为单独的页面或使用 AJAX 动态加载。重大改进。
避免使用 svg 文件。 SVG 文件需要大量的计算能力来栅格化和显示。这是 7 秒加载时间的主要原因。以最大的预期显示分辨率将文件转换为 png，如果需要更多详细信息（通过单击或延迟鼠标悬停），则提供扩展的 SVG 文件。重大改进。
图像数量不是问题。这是导致问题的 SVG 图像（加载时）和脚本的数量。
打开Chrome中的页面，打开开发者工具，然后切换到"Performance tab"。
然后使用左起第二个图标 - 看起来像 "reload" 按钮的那个。其中说 "Start profiling and reload page".
您将全面了解哪些内容占用了多少。您可以在顶部看到什么正在消耗 FPS 和 CPU，然后您可以 select 负载特别高的时间范围。
然后在底部 select "Call Tree" 或 "Bottom-Up" 选项卡，以了解哪些脚本和函数调用会导致性能问题。
通常 "normal" 网站（例如非游戏）不会有很多帧重绘。然后，您可以发现例如加载微调器是否使用 javascript 动画，而不是转换和过渡；有时它们仍在重新渲染，尽管它们遥不可及。
关于 React 特定说明：使用 React Developer Tools 额外检查它也可能有意义。例如。您可能能够发现子帧是否无缘无故地不断重新渲染。