How can I measure rendering time of huge svg?

Question

I am trying to figure out how I can measure the rendering time of 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. 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.

I have also tried PerformanceTimingAPI and PerformanceElementTimingAPI but no luck.

Thanks in advance!

Answer 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.

Try using Chrome DevTools' Performance recording feature. 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.