简体繁体 English

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

[英]How can I measure rendering time of huge svg?

原文 2021-12-20 03:01:46 5 1 javascript/ html/ svg/ dom/ dom-events

I am trying to figure out how I can measure the rendering time of SVG.我试图弄清楚如何测量 SVG 的渲染时间。 When I make changes to the SVG elements (eg Zoom In or Zoom Out), it takes a few seconds to take effect because SVG is huge.当我对 SVG 元素进行更改（例如放大或缩小）时，需要几秒钟才能生效，因为 SVG 很大。 And I need to measure the time it took to update for performance analysis purposes.而且我需要测量更新所花费的时间以进行性能分析。 I have tried several DOM events like DOMContentLoaded DOMNodeInserted DOMNodeSubtreeModified but all these events are triggered before changed SVG is rendered on screen.我已经尝试了几个 DOM 事件，例如DOMContentLoaded DOMNodeInserted DOMNodeSubtreeModified但所有这些事件都是在更改 SVG 呈现在屏幕上之前触发的。

I have also tried PerformanceTimingAPI and PerformanceElementTimingAPI but no luck.我也尝试过PerformanceTimingAPI和PerformanceElementTimingAPI但没有运气。

Thanks in advance!提前致谢！

1 个解决方案

There's also MutationObserver but if you're already experiencing trouble with JS events saying a change happened in the DOM, but you're not seeing the browser engine re-render, then you might not be able to use JS to measure this and may need to use a more “manual” method.还有MutationObserver但如果您已经遇到 JS 事件的问题，说 DOM 发生了变化，但是您没有看到浏览器引擎重新渲染，那么您可能无法使用 JS 来衡量这一点并且可能需要使用更“手动”的方法。

Try using Chrome DevTools' Performance recording feature.尝试使用 Chrome DevTools 的性能记录功能。 If you enable screenshots, you should be able to see when the rendering took effect.如果启用屏幕截图，您应该能够看到渲染何时生效。 Combine this with performance.mark() and you should be able to see when you triggered the DOM mutation, and when the screenshot actually updated.将此与performance.mark()结合起来，您应该能够看到触发 DOM 突变的时间，以及屏幕截图实际更新的时间。