When are MutationObserver callbacks fired?

Question

I know that MutationObservers callbacks may get called sometime after the DOM change. But the question is: What is the timing of these callbacks? Do the callbacks enter the

Answer 1

I'm going to answer my own question two years later according to the updated DOM spec from WHATWG.

As shown in the spec:

To queue a mutation observer compound microtask, run these steps:

1. If mutation observer compound microtask queued flag is set, terminate these steps.
2. Set mutation observer compound microtask queued flag.
3. Queue a compound microtask to notify mutation observers.

While "Queuing a compound microtask" links to a section in the HTML spec explaining the microtask queue model.

Therefore, we can conclude that MutationObserver callbacks are fired as microtasks, which are indeed sooner than the task queue tasks as suggested by the answer of @Scott Miles above.

For further understanding of the event loop and processing model, the Event Loop section of the HTML spec would be perfect.

Personally, I'm glad to see that MutationObservers are part of the standard and have a well-documented and consistent timing model. With MutationObservers supported in most modern browsers, I think they are solid for production use now.

Answer 2

MutationObservers are fired asynchronously but 'soon', which means they fire before other things in the queue, such as layout, paint, or triggered events.

This ameliorates the loss of synchrony, because you don't have to worry about screen flashing or other bad things happening before your observer gets a chance to react.

In developer notes, they talk about an 'end-of-microtask' timing model. I agree this is poorly documented.