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

Question

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

我也尝试过PerformanceTimingAPI，PerformanceElementTimingAPI但没有运气。

提前致谢！

Answer 1

还有\xe2\x80\x99s还有MutationObserver，但是如果你\xe2\x80\x99已经遇到了JS事件的麻烦，说DOM中发生了更改，但你\xe2\x80\x99没有看到浏览器引擎重新渲染，那么你可能无法使用JS来测量这一点，可能需要使用more\xc2\xa0\xe2\x80\x9cmanual\xe2\x80\x9d方法。

\n

尝试使用 Chrome DevTools\xe2\x80\x99性能记录功能。如果启用屏幕截图，您应该能够看到渲染何时生效。将此与Performance.mark()结合起来，您应该能够看到何时触发 DOM 突变，以及屏幕截图何时实际更新。

\n