javascript - REACT- DOM Mutation Warning Meaning - Stack Overflow

admin管理员组

文章数量:1290189

[Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive.

There's another question regarding this warning. I already answered a way to solve it there, and that is not the reason for this question. (for those who would like to know: this warning disappears if you add a setTimeOut function to your event handler, so it is not synchronous anymore)

The REAL question is: What does "DOM mutation listener" mean? Or what IS a "DOM mutation listener"? And what does it do? I asked my teacher, and not even him knew. He suggested it might be something now deprecated but I feel like it shows up for a reason and I would like to fully understand it in case i get a similar error but different regarding a "DOM mutation listener" in the future.

[Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive.

There's another question regarding this warning. I already answered a way to solve it there, and that is not the reason for this question. (for those who would like to know: this warning disappears if you add a setTimeOut function to your event handler, so it is not synchronous anymore)

The REAL question is: What does "DOM mutation listener" mean? Or what IS a "DOM mutation listener"? And what does it do? I asked my teacher, and not even him knew. He suggested it might be something now deprecated but I feel like it shows up for a reason and I would like to fully understand it in case i get a similar error but different regarding a "DOM mutation listener" in the future.

• javascript
• reactjs

Share Improve this question Follow edited Jan 12, 2020 at 0:20 CertainPerformance 371k5555 gold badges350350 silver badges356356 bronze badges asked Jan 12, 2020 at 0:13 GiselleMtnezSGiselleMtnezS 10522 gold badges22 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

A DOM mutation listener does just what it sounds like - it listens for mutations to the DOM. For example, if you attach such a listener, and then add or remove a node, the listener may be able to detect it and fire a callback. There are various types of DOM mutations that can be watched for.

For an example of a synchronous one (which are slow, deprecated, and not remended):

container.addEventListener('DOMNodeInserted', () => {
  console.log('mutation seen!');
});

container.insertAdjacentHTML('beforeend', 'content');

<div id="container"></div>

For this sort of functionality, you're remended to use MutationObserver instead, which is not quite synchronous - a MutationObserver callback runs during a microtask after the mutation:

new MutationObserver(() => {
  console.log('mutation seen!');
}).observe(container, { childList: true });

container.insertAdjacentHTML('beforeend', 'content');

<div id="container"></div>

Mutation observers are usually only the right choice when you need to interact with the functionality of code you can't change - for example, if you're using a script or a library that changes something in the DOM, and you need to be able to detect when that change occurs, but you can't modify the source script and that script doesn't provide any externally-visible indication that such a change occurred.

Except in that (unusual) situation, there are usually better methods to react to changes, such as just calling a function after the function that changes the DOM is done.

本文标签： javascriptREACT DOM Mutation Warning MeaningStack Overflow