1.DOM tree changes?

We used to listen for Mutation Events to change the structure of DOM node attributes, text, insertion, and removal in the browser

1.1Mutation Event list

  • DOMAttrModified(Node attribute change)
  • DOMAttributeNameChanged(Node attributes attribute node name changed)
  • DOMCharacterDataModified(The text node in the node changes)
  • DOMElementNameChanged(Node removal)
  • DOMNodeInserted(Insertion of node-point node)
  • DOMNodeRemoved(Nodal node removed)
  • DOMNodeInsertedIntoDocument(Node inserted into document)
  • DOMSubtreeModified(Node point node modification)

The simple usages of 1.2Mutation are as follows

document.getElementById('list').addEventListener("DOMSubtreeModified".function(){
  console.log('List neutrons have been modified');
}, false);
Copy the code

1.3 Problems encountered by Mutation Events

  • Browser Compatibility Issues
    1. Internet explorer does not supportMutation Events
    2. The Webkit kernel does not support itDOMAttrModifiedFeatures,
    3. DOMElementNameChangedandDOMAttributeNameChangedNot supported on Firefox.
  • Performance issues
    1. Mutation EventsIt’s synchronous, so every time it calls, it has to take the event from the event queue, execute it, and then remove it from the event queue, moving the queue element. If the event is triggered frequently, each time these steps need to be performed, the browser will be slowed down.
    2. Mutation EventsIs itself an event, so the capture takes the form of an event bubbling up if another event is triggered during the bubbling captureMutationEventsThis can cause Javascript threads to block and even crash the browser.

2.Mutation Observer

Mutation Observer is a new API defined in DOM4 to replace Mutation Events. It differs from Events in that all listening operations and corresponding processing are executed asynchronously after the execution of other scripts and after all changes are triggered. That is, when you use the Observer to listen for multiple DOM changes, and the DOM changes occur, the Observer logs the changes to the DOM changes array, waits for them to complete, and then executes its corresponding callback function from the DOM changes array once and for all.

2.1 Usage Mode

  • Constructor (MutationObserver)

The Mutation observer object is used to instantiate a Mutation observer object whose argument is a callback function that is executed after the specified DOM node sends the change and is passed two arguments. One is the array of change Records and the other is the observer object itself.

var observer = null;
if(window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver){
    observer = new MutationObserver(callback)
}
Copy the code
  • Observer (observe)

On the observer object, register the DOM node you want to observe, along with the corresponding parameters

// Observer configuration item
var options = { 
    childList: true.// Observe the addition and deletion of children of the target node
    subtree: true.// Observe all descendants of the target node
    attributes: true.// Observe the property node of the target node
    attributeOldValue: true.// With the attributes attribute already set to true, record the value of the attribute prior to the changed attribute node
    attributeFilter:// An array of property names (no namespace required) is observed only when the property names contained in the array change. Other property names change and are ignored if you want to set the selected parameters
    characterData: true.// If the target node is a characterData node (an abstract interface, which can be a text node, a comment node, or a processing instruction node), also observe whether the text content of the node has changed
    characterDataOldValue:true.Record the text content of the characterData node that changed before it was set to true (in the oldValue property of the MutationRecord object below)
}

// The DOM node to observe
var element = document.getElementById('text');

/* * Executes observer *records: changes the array of records *instance: the observer object itself */

observer.observe(text, options, (records, instance) = > {
    console.log(records)
    console.log(instance)
    records.map(record= > {
      console.log('Mutation Type: ' + record.type)
      console.log('Mutation Change Attribute: ' + record.attributeName)
      console.log('Previous attribute value: ' + record.oldValue)
    })
})
Copy the code
  • Stop observing (disconnect)

Stop node change listening on the observer object until the observe method is called again

// Then you can stop observing
observer.disconnect();
Copy the code
  • Clear change records (takeRecords)

Used to clear change records, that is, unprocessed changes are no longer processed. This method returns an array of change records

// Returns an array of change records
var changes = observer.takeRecords();
Copy the code

2.2 Application Scenariosvue.$nextTrick

$nextTrick in VUE is understood as a callback to be executed after the next update to the DOM, takes two parameters (the callback function and the context in which the callback was executed), and returns a Promise object if no callback function is provided. After viewing the vue source code, it is found that the browser does not support Porimise. MutationObserver is preferred for microtask execution to achieve asynchronous DOM update

3. Related connections

  • Mutation Observer API