artifact-performancelisted

# Artifact performance Two numbers govern how a data page feels: - **Time to first meaningful paint** — under ~1s or it feels broken - **Interaction response** — under ~100ms or it feels laggy Everything below serves one of those. Measure before optimizing; the bottleneck is rarely where it feels like it is. --- ## Measure first ```js performance.mark('render-start'); renderChart(data); performance.mark('render-end'); performance.measure('chart', 'render-start', 'render-end'); console.log(performance.getEntriesByName('chart')[0].duration.toFixed(1) + 'ms'); ``` Then use the browser's performance panel. The usual culprits, in the order they usually appear: 1. **Too much embedded data** parsed on load → `artifact-data-loading` 2. **Too many DOM nodes** → aggregate, paginate, or virtualize 3. **Per-element event listeners** → delegate 4. **Layout thrash** — reading and writing layout in a loop 5. **Re-rendering everything** when one region changed --- ## The element-count thresholds | Elements | Approach | |---|---| | < 1,000 | SVG, no special handling. Almost every finance chart lives here | | 1,000-5,000 | SVG, but delegate events and skip per-element transitions | | 5,000-50,000 | Canvas for the marks, SVG overlay for axes, labels, and interaction | | > 50,000 | Aggregate or bin. This is a data problem, not a rendering one | A bridge has 12 bars. A monthly series has 36 points. A cohort heatmap has 576 cells. **Reaching for canvas on a finance chart is almost alwa