Skip to content
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

Avoid fetching selections when possible #3538

Merged
merged 1 commit into from
Feb 25, 2022
Merged

Avoid fetching selections when possible #3538

merged 1 commit into from
Feb 25, 2022

Conversation

luin
Copy link
Member

@luin luin commented Feb 24, 2022

On Blink, document.getSelection() forces layout which breaks the browser's optimization of batch DOM mutations. The impact on the performance is noticeable when you do a lot of DOM mutations and getRange() at the same time. It is worth noticing that editor mutation triggers getRange() (https://github.com/quilljs/quill/blob/d462f8000ffbaa3aab853809fb08f7809f828475/core/quill.js#L103) so the impact is non-trivial when you initialize many Quill instances at the same time.

This PR optimizes Quill initialization when the container has not been inserted into the DOM tree yet. This enables an optimization possibility that users can insert the Quill container after the content is initialized. So instead of:

const container = document.body.appendChild(
  document.createElement('div')
);

const quill = new Quill(container);

Users can:

const container = document.createElement('div');
const quill = new Quill(container);
document.body.appendChild(container);

As an example, when rendering 4000 Quill instances on a page, previously it took ~2min:

CleanShot 2022-02-24 at 16 56 07@2x

And after this PR, it only takes 14s:

CleanShot 2022-02-24 at 16 57 14@2x

@luin luin marked this pull request as draft February 24, 2022 15:37
@luin luin marked this pull request as ready for review February 25, 2022 01:36
@jhchen jhchen merged commit 6cbebf2 into develop Feb 25, 2022
@jhchen jhchen deleted the zh-perf-get-range branch February 25, 2022 05:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants