demo · v135

Mutation Events vs MutationObserver

Chrome 135 deprecates the legacy synchronous Mutation Events. Run both — the old DOMNodeInserted path and the modern MutationObserver path — and compare what they catch and how long they take.

DOMNodeInserted: ? MutationObserver: yes

DOMNodeInserted (deprecated)

MutationObserver (recommended)

0 legacy events fired — ms legacy total 0 mutation records seen — ms observer total

the code

// legacy — DEPRECATED in Chrome 135
node.addEventListener("DOMNodeInserted", (e) => {
  // fires synchronously per insertion, blocks the inserter
});

// modern — use this instead
const mo = new MutationObserver((records) => {
  // batched, async, doesn't block layout
});
mo.observe(node, { childList: true, subtree: true });

see also