Company
Date Published
Author
Yomi Eluwande
Word count
2489
Language
-
Hacker News points
None

Summary

In an effort to optimize the rendering of Flame Graphs, a visualization tool used for identifying performance bottlenecks in applications, Parca and Polar Signals Cloud shifted from a recursive SVG-based approach to a more efficient backend-driven method. Initially, the frontend relied heavily on recursive tree traversal for rendering, creating performance bottlenecks as it scaled poorly with larger data sets. The new solution involves pre-calculating key metrics like node depth and horizontal offsets on the backend, allowing each frame in the Flame Graph to independently calculate its position on the frontend without knowing its parent or siblings, thus enabling parallel rendering. This shift not only eliminated the need for expensive tree traversals but also improved rendering speed significantly, reducing it to 91ms. Additional performance enhancements were achieved through viewport culling, a technique adapted from 3D graphics, which skips the rendering of frames outside the visible screen area. Although the team considered using Canvas for potentially better performance, they opted to retain SVG for its interactive capabilities, while contemplating further backend optimizations like pre-grouping frames by depth to streamline the culling process.