-
Notifications
You must be signed in to change notification settings - Fork 3.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Performance degradation with DOM mutation events #1768
Comments
Running on both quilljs.com and google.com results in < 5ms being reported on Chrome. Maybe the platform matters? |
🤔 I think the difference is a lot more obvious when running the profiler as well -- though that could very well be the overhead associated with profiling events. However if I use finer timing tools (e.g. performance.mark) to time only the appendChild, I see a slowdown of 2 - 3x |
@albertxing I made a simple benchmark to reproduce the performance issue: Here are the numbers I gathered:
|
How about only adding the DOMNodeInserted listener when IME input is detected? Add the listener when |
There must be another way to fix #1437. Is there any explanation why adding the empty listener even fixes this? |
@kevinhend @jhchen I propose we add a new boolean flag to the In the Quill source code: if (config.compatibilityMode) {
this.domNode.addEventListener('DOMNodeInserted', function() {});
} When using Quill: var editor = new Quill(document.querySelector('.editor'), {
compatibilityMode: false,
// ...
}); What do you think? If you'd like, I can submit a PR with my proposed implementation. |
Hello, |
I can see that the listener was removed again in 41a60fb#diff-64791d4c2bd2baa277845f35fac28055 As far as I can tell, this is not yet reflected in 1.3.6 but only in develop (for 2.0?) |
Some news here? |
Any plans to do something about this? |
Project dead ? |
Is there a fix for this at the moment or not ? polyfills.js:11152 [Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive. it causes perf issues especially when you have many quill editors on a page. |
Any update? |
Yes wondering if theres any updates also? |
I think @caleb531's solution is the one to go for here 👍 For everybody else that is facing this and wants to fix this in the meanwhile: I deleted the line
everywhere I could find it in the EDIT: ironically, if you want to create a patch for |
Any update? |
Has this problem been fixed in a new update? I'm running angular 9 and i have this problem too. |
Same problem, the report is important on my application. And impossible to find any viable way to solve it. |
Any updates regarding this issue? The proposal from @caleb531 sounds good #1768 (comment) |
This problem is related to DOMNodeInserted event. |
any updates here to fix this ??? |
Same issue with Angular 12 when creating |
This was removed in 2018 but never made it into version 1.3.7 that is being served on NPM. Removal PR in 2018: 41a60fb#diff-5f9943a0ada23637672023452b5f7e4c7d2a715487446dd346e4ebcd7c9d9ccbL16 1.3.7 that is being served on NPM (2017): https://github.com/quilljs/quill/blob/1.3.7/blots/scroll.js#L25 You can use develop branch instead of NPM package: https://github.com/quilljs/quill/blob/develop/blots/scroll.ts#L42 |
Is there any update on this? |
is there any solution? |
Sorry for the late response. The listener has already been removed on develop branch and we are working on a new release for it. Closing for now. |
Any news on when a new release will be available with this fix @luin ? |
Hi, any updates on this issue? |
Hello, I just started using quill and encountered the same warning. Any idea when this might get fixed? |
Most changes planned for version 2.0 have already been implemented in |
I can confirm removing the following from the minified js works. V 1.3.7
|
hello, |
Epic comeback after PR open for 6 years :) |
Using react-quill v2.0.0 and got both Any idea about what to do? |
I'm also encountering "Use of Mutation Events is deprecated. Use MutationObserver instead." in one of my projects with Quill 1.3.7. I tried to upgrade to 2.0.2 but that breaks the entire project. Could you maybe release a 1.3.8 with the suggested skip option added? |
The usage of DOM mutation events in Quill (specifically,
DOMNodeInserted
from c4d8978) 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:
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
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
The text was updated successfully, but these errors were encountered: