Skip to content

performance: add more CSS containment to text-editor#236

Merged
aminya merged 1 commit intomasterfrom
css-containment
Oct 21, 2020
Merged

performance: add more CSS containment to text-editor#236
aminya merged 1 commit intomasterfrom
css-containment

Conversation

@aminya
Copy link
Member

@aminya aminya commented Oct 21, 2020

Description of the Change

This adds more CSS containment to tree-view CSS classes. This results in performance improvements by giving the hint to the browser that the size/paint/layout of these elements does not affect other elements around them.

I have added the CSS containment for each class selectively by testing all the functionalities. As you see, these do not change the functionality.

Benefits

Improves the performance and responsiveness of the text editor. It has improved scrolling performance. The datatips and decorations are rendered faster than before.

The reason is that the browser will not need to recalculate the styles on clicks, scrolling, drag-drop, during the loading, etc.

Quoting CSS specifications

The contain property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows user agents to utilize much stronger optimizations when rendering a page using contain properly and allows authors to be confident that their page won’t accidentally fall into a slow code path due to an innocuous change.

Here I opened the src/text-editor.js and I waited for 15s:
After this PR
image
image

Before this PR
image
image

Verifications

I have tested all the functionalities including:

  • Writing text
  • Removing text
  • Selecting text
  • Highlighting text
  • Folding and unfolding
  • Hovering on the gutter
  • Line numbers preserved
  • Text entries in settings view, fuzzy finder, etc work without issues
  • Datatips and Linter overlays work as expected
  • Linter decorations work as expected
  • Autocomplete works as expected
  • Pigments colors work as expected
  • Scrolling works as expected
  • Themes can be changed
  • Text editors can be resized or moved

This is in addition to all of the tests passing.

Release Notes

  • Improving the performance of text editor by adding more CSS containment

@aminya
Copy link
Member Author

aminya commented Oct 21, 2020

Could you test this? @UziTech @lierdakil

The binaries will be downloadable from the CI page:

https://dev.azure.com/atomcommunity/atomcommunity/_build/results?buildId=984&view=results

This adds more [CSS containment](https://drafts.csswg.org/css-contain/#contain-property) to text-editor CSS classes. This results in performance improvements by giving the hint to the browser that the size/paint/layout of these elements does not affect other elements around them.

The CSS containment for each class is added selectively by testing all the functionalities.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant