Performance degradation with DOM mutation events

The usage of DOM mutation events in Quill (specifically, DOMNodeInserted from c4d897838a463d8396c9e93ec9faf5e9bca5566d) significantly degrades the performance of DOM node insertions and removals on the entire document. Additionally, the API is deprecated.

More information about the performance effects of DOM mutation events can be found on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events In particular:

Adding DOM mutation listeners to a document profoundly degrades the performance of further DOM modifications to that document (making them 1.5 - 7 times slower!). Moreover, removing the listeners does not reverse the damage.

The listener was originally added to address #1437 — I’m not sure why adding mutation listeners would fix that bug, but it would be nice to find another solution.

I have tried substituting the mutation event listener with a MutationObserver, but using MutationObserver doesn’t fix the bug.

Steps for Reproduction

1. Visit https://quilljs.com
2. Run the following code in console:

document.body.addEventListener('click', () => {
    console.time();
    for (let i = 0; i < 1000; i++) {
        const div = document.createElement('div');
        document.body.appendChild(div);
    }
    console.timeEnd();
});

1. Click on the page and observe timing information
2. Run the same code on another site, to compare

Expected behavior: DOM node insertions are fast

Actual behavior: DOM node insertions are painfully slow

Platforms: This seems to affect all major browsers and platforms

Version: >= 1.2.5, when the listener was added

[echan00]

Any plans to do something about this?

[vinzzzb]

Any update?