What is DOM churn and why does it matter?

DOM churn refers to rapid, excessive updates to the DOM. High churn rates often lead to 'jank' or dropped frames, resulting in a poor, laggy user experience.

Does the profiler itself impact page performance?

Injecting observers adds a small amount of overhead. While negligible for most tasks, it is recommended to scope the observer to specific containers on extremely large pages.

Which browsers are supported by this profiler?

The MutationObserver features work across all browsers, but the Long Animation Frame (LoAF) correlation requires a Chromium-based browser like Chrome 123+.

Can this skill identify specific React or Vue components?

It operates at the DOM level and identifies subtrees using IDs and classes. While it doesn't name framework components directly, it points to the specific DOM structures they render.

DOM Churn Profiler

Name: DOM Churn Profiler
Author: anouar1991

byanouar1991

•

분석 및 모니터링

Identifies and analyzes excessive DOM mutations that cause UI jank and performance degradation using real-time instrumentation.

The DOM Churn Profiler is a diagnostic tool designed for Claude Code to pinpoint performance bottlenecks caused by inefficient DOM updates. By injecting a MutationObserver and a Long Animation Frame (LoAF) PerformanceObserver into a web page, the skill captures every mutation and correlates it with frame drops to identify exactly which subtrees are thrashing the DOM. This is particularly useful for debugging React, Vue, or Svelte applications where unnecessary re-renders cause visual instability, providing developers with actionable data on which components require optimization.

주요 기능

01Injects MutationObserver to track node and attribute changes in real-time

021 GitHub stars

03Provides automated performance summaries with mutations-per-second metrics

04Visual hotspot highlighting with automated Playwright screenshots

05Correlates DOM churn events with Long Animation Frame (LoAF) data

06Heuristic subtree identification using IDs, classes, and data-testids

사용 사례

01Debugging UI jank in complex single-page applications (SPAs)

02Validating performance improvements after frontend optimizations

03Identifying excessive re-renders in framework-based components

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anouar1991/binarypetsclaude dom-churn-profiler

For use in Claude.ai and ChatGPT

Download Skill