MutationObserver cost
Slap yourself if
You think MutationObserver is cheap because it’s async or believe it replaces manual DOM reads without cost.
Why this exists
Because MutationObserver is often introduced to avoid layout thrashing and ends up creating invisible CPU pressure, memory churn, and scheduling pathologies instead.
Mental model
MutationObserver shifts cost from synchronous reads to asynchronous bookkeeping. You avoided blocking — not work.
- The browser records DOM mutations during execution.
- Mutation records are queued, not processed immediately.
- Callbacks are delivered asynchronously after the current task.
- Large mutation sets are batched and replayed to userland.
- Observing large subtrees indiscriminately.
- Reacting to mutations by mutating the DOM again.
- Assuming observers are free because they don’t force layout.
- Using MutationObserver as a generic state sync mechanism.
MutationObserver avoids synchronous layout but incurs bookkeeping, allocation, and callback costs proportional to mutation volume and observation scope.
- Calls it zero-cost.
- Treats it as a DOM event.
- Ignores mutation volume.
- Assumes async equals cheap.
Deep dive
Requires Pro
Premium deep dives include more internals, more scars.