如何测量巨大 svg 的渲染时间？

Posted 2023-02-21

【中文标题】如何测量巨大 svg 的渲染时间？

【英文标题】：How can I measure rendering time of huge svg?

【发布时间】：2022-01-21 18:52:24

【问题描述】：

我想弄清楚如何测量 SVG 的渲染时间。 当我对 SVG 元素进行更改（例如放大或缩小）时，需要几秒钟才能生效，因为 SVG 很大。 而且我需要测量更新所花费的时间以进行性能分析。 我尝试了几个 DOM 事件，例如 DOMContentLoaded DOMNodeInserted DOMNodeSubtreeModified，但所有这些事件都是在更改的 SVG 呈现在屏幕上之前触发的。

我也尝试过PerformanceTimingAPI 和PerformanceElementTimingAPI，但没有成功。

提前致谢！

【问题讨论】：

"我也尝试过 PerformanceTimingAPI 和 PerformanceElementTimingAPI，但没有成功。" - 告诉我们！好吧，真的，向我们展示你自己解决这个问题的任何尝试。然后我们可以帮助您调试它。

如果 svg 太大以至于您所做的任何更改“需要几秒钟才能生效”，您可能需要考虑替代解决方案。您可能会发现this article by Sara Soueidan 很有用。

【参考方案1】：

还有MutationObserver，但如果你已经遇到了 JS 事件的问题，说 DOM 发生了变化，但是你没有看到浏览器引擎重新渲染，那么你可能无法使用 JS对此进行衡量，可能需要使用更“手动”的方法。

尝试使用 Chrome DevTools 的 Performance recording 功能。如果启用屏幕截图，您应该能够看到渲染何时生效。将其与performance.mark() 结合使用，您应该能够看到触发 DOM 突变的时间，以及屏幕截图实际更新的时间。