MutationObserver cost

Summary

Observes DOM mutations — expensive on large subtrees and high churn. Prefer framework lifecycle or targeted observers. subtree: true on document.body is a performance footgun. Use for third-party widget integration when no hooks exist.

Code example

const mo = new MutationObserver((mutations) => {
  for (const m of mutations) {
    if (m.type === 'childList') reconcileThirdPartyWidget(m.target);
  }
});
mo.observe(widgetRoot, { childList: true, subtree: false });

Key points

• Observes DOM mutations — expensive on large subtrees and high churn.
• Prefer framework lifecycle or targeted observers.
• subtree: true on document.body is a performance footgun.
• Use for third-party widget integration when no hooks exist.

Further reading

• MutationObserver
• MutationObserverInit

Related concepts

• ResizeObserver loop limits
• OffscreenCanvas