Canvas supera a SVG: el nuevo dashboard de Polar Signals renderiza flame graphs 3,6 veces más rápido

We rewrote our custom visualisation renderers from SVG to be in Canvas

Canvas supera a SVG: el nuevo dashboard de Polar Signals renderiza flame graphs 3,6 veces más rápido

Polar Signals reescribió los renderizadores de visualización personalizados de SVG a Canvas para su dashboard de profiling, logrando una mejora de rendimiento de 3,6 veces en el renderizado de flame graphs (de 164 ms a 46 ms) y una interacción mucho más fluida: el zoom pasó de 121 ms a 29 ms, el scroll de 30 ms a 6 ms, y el reset de 528 ms a 47 ms. La clave está en que Canvas usa un API de modo inmediato, sin árbol de nodos DOM, y en que el renderizado se beneficia de datos columnar Arrow con zero-copy, evitando la creación de objetos y elementos por frame. El artículo detalla las diferencias entre los APIs de modo retenido (SVG, DOM) e inmediato (Canvas), y explica cómo la estrategia de culling y la precomputación de posiciones hacen que el renderizado sea eficiente. También abordan los desafíos de pasar a Canvas, como el hit-testing manual.

Canvas es más rápido porque el navegador hace menos por ti. Lo que significa que todo lo que el DOM hacía gratis ahora es tu problema.

Más de este día

2026-07-20