CSS Containment Audit

Automatically finds DOM elements where adding contain: layout style would reduce browser recalculation overhead.

What It Does

1. Loads a large workflow (245 nodes) in a real browser
2. Walks the DOM tree and scores every element as a containment candidate
3. For each high-scoring candidate, applies contain: layout style via JavaScript
4. Measures rendering performance (style recalcs, layouts, task duration) before and after
5. Takes before/after screenshots to detect visual breakage
6. Generates a ranked report with actionable recommendations

When to Use

• After adding new Vue components to the node rendering pipeline
• When investigating rendering performance on large workflows
• Before and after refactoring node DOM structure
• As part of periodic performance audits