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

Question

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

Answer 1

还有MutationObserver但是如果你已经遇到了 JS 事件的问题，说 DOM 发生了变化，但是你没有看到浏览器引擎重新渲染，那么你可能无法使用 JS 来衡量这一点，可能需要使用更多“手动”方法。
尝试使用 Chrome DevTools 的 Performance recording特征。如果启用屏幕截图，您应该能够看到渲染何时生效。将此与 performance.mark() 结合使用您应该能够看到触发 DOM 突变的时间，以及屏幕截图实际更新的时间。