“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

MutationObserver API MDN: The interface provides the ability to monitor changes made to the DOM tree, creating and returning a new MutationObserver that is called when the specified DOM changes.

And the call is a microtask, which can be seen in use in the Vue source code $nextTick

// Use MutationObserver where native Promise is not available,
PhantomJS, iOS7, Android 4.4
// (#6466 MutationObserver is unreliable in IE11)
let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
  characterData: true
})
timerFunc = () = > {
  counter = (counter + 1) % 2
  textNode.data = String(counter)
}
Copy the code

In the source code, first create a MutationObserver object, pass in the flushCallbacks as a callback, then create a text node with a value of 1, and use the MutationObserver instance to observe the text node. Finally, the microtask wrapper timerFunc modifies the value of the text node. Knowing from the API that the DOM changes, the monitor calls the callback function passed in when the instance is created

The idea here is to modify the DOM text node, and the MutationObserver notices and calls the callback function to implement the microtask

But why is it that the callback function executed after the DOM changes is a microtask?

Here’s an example:

So let’s look at this code

<body>
  <div id="id"></div>
  
  <script>
  
    document.body.style.backgroundColor = 'red'

    document.querySelector('#id').innerText = 456

    Delay / / 5 s
    const time = Date.now()
    while(Date.now() - time < 5000) {continue
    }

    document.body.style.backgroundColor = 'blue'
    
  </script>
</body>
Copy the code

What do you think the browser will do? The page turns red, the div text shows 456, and after 5s, the page turns blue?

When you execute this code in your browser, you’ll notice that the page doesn’t change at all until 5s, after which the page turns blue and 456 appears. This is because: JS operations on the DOM are executed after the macro and micro tasks in the current task queue are completed. Js code execution is the responsibility of the JS engine thread, dom style changes are the responsibility of the GUI rendering thread, so the two threads are mutually exclusive, resulting in an “asynchronous” dom manipulation effect, and GUI rendering is optimized and multiple operations on the same DOM are merged.

So dom changes are asynchronous, as if the dom changes after the callback function is also asynchronous, vue source code $nextTick also uses this feature, with the MutationObserver API to achieve a good effect of microtasks.

conclusion

  • The MutationObserver API interface provides the ability to monitor changes made to the DOM tree, creating and returning a new MutationObserver that is called when the specified DOM changes, and that call is a microtask
  • Js operations on DOM are performed after all macro tasks and micro-tasks in the current task queue are completed. Micro-tasks can be implemented with MutationObserver