microsoft / microsoft/monaco-editor

[Bug] High CPU Usage and Out of Memory Issue in Chrome

Open
#4,801 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
46.8k
Forks
4.1k
Avg merge
17h 58m
Merged PRs (30d)
1

Description

Reproducible in vscode.dev or in VS Code Desktop?
  • Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
Monaco Editor Playground Link

Using this library causes severe performance issues, particularly in Chrome:

Chrome: The browser runs out of memory, with CPU usage spiking to nearly 100% as shown in Chrome DevTools. Additionally, an excessive number of DOM nodes are created, contributing to the problem.
Other Browsers: While the issue does not result in an out-of-memory error, it still leads to noticeable performance degradation.
Steps to Reproduce:

Set a fixed height on instance (e.g., 800px).
Populate the editor with a large amount of text.
Scroll up and down quickly (at a faster pace than typical reading).
Observe the performance impact:
Noticeable performance degradation, particularly in Chrome.
In Chrome, extreme memory usage and high CPU consumption can occur.
This issue becomes more evident when the text within the editor is large enough to stress the rendering and scrolling performance.

My app (angular) is breaking because of this. Makes me believe there monaco-editor demos are really small because of this...

Monaco Editor Playground Code

Reproduction Steps

Set a fixed height on instance (e.g., 800px).
Populate the editor with a large amount of text.
Scroll up and down quickly (at a faster pace than typical reading).
Observe the performance impact:
Noticeable performance degradation, particularly in Chrome.
In Chrome, extreme memory usage and high CPU consumption can occur.
This issue becomes more evident when the text within the editor is large enough to stress the rendering and scrolling performance.

Actual (Problematic) Behavior

No response

Expected Behavior

No response

Additional Context

Image

this is causing out of memory issues. see chrome debug dump:

Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No source file, test, or runnable playground code is provided. Start by building the described reproduction with an 800px editor, large text, and rapid scrolling, then use Chrome DevTools to measure DOM growth, CPU, and memory; done requires a confirmed cause and a demonstrated performance improvement across the reported browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, javascript, typescript
Domain
frontend, performance, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.