Performance Analysis Demo

Two examples of common performance bottlenecks to analyze with the AI Assistant.

Demo 1: Inefficient Animation (Layout Thrashing)

This animation intentionally reads and writes layout properties in a loop, forcing the browser to recalculate styles on every frame. To analyze: Open the Performance panel, record a few seconds of the animation, and ask the AI to explain the "Forced Reflow" or "Layout Thrashing" warnings.

Demo 2: Slow Table Re-render

This large table re-renders completely every time you edit a single cell. To analyze: Open the Performance panel, start recording, edit a cell in the table below, and then stop recording. Find the "Long Task" and ask the AI to explain why it happened and how to optimize the code.