์ผ€์ด์Šค ce-0324-chrome-v96-performance-regression-spellcheck-ko ยท ์‹œ๋‚˜๋ฆฌ์˜ค scenario-chrome-v96-performance-regression-spellcheck

Chrome v96 performance regression with spell checking in large contenteditable

OS: Any Any ๊ธฐ๊ธฐ: Desktop or Laptop Any ๋ธŒ๋ผ์šฐ์ €: Chrome 96 ํ‚ค๋ณด๋“œ: US ์ดˆ์•ˆ
performancechromespellcheckregressionv96

Phenomenon

Chrome version 96 introduced significant performance regressions when working with large documents in contenteditable elements. Users experience sluggish typing, high CPU usage, and overall unresponsiveness. The issue appears to be linked to Chromeโ€™s spell-checking feature, and disabling spell check mitigates the performance degradation.

Reproduction example

  1. Create a contenteditable div with large amount of content (10,000+ words).
  2. Use Chrome version 96 or later.
  3. Type characters in the contenteditable element.
  4. Observe sluggish typing and high CPU usage.
  5. Disable spell checking and observe improved performance.

Observed behavior

  • Sluggish typing: Each keystroke has noticeable delay in Chrome v96+.
  • High CPU usage: Browser uses significant CPU during typing.
  • Spell check related: Disabling spell check improves performance.
  • Large documents: Issue more pronounced with large content.
  • Version-specific: Chrome v96 introduced the regression.
  • Rich text editors: Particularly affects editors like ProseMirror.

Expected behavior

  • Typing should be responsive regardless of content size.
  • Spell checking should not cause significant performance degradation.
  • CPU usage should remain reasonable during typing.
  • Performance should be consistent across Chrome versions.

Analysis

Chrome v96 changed how spell checking works with contenteditable elements, causing the browser to perform expensive operations on large documents during each keystroke. The spell checker may be re-analyzing the entire document rather than just the affected region.

Workarounds

  • Disable spell checking on contenteditable element:
    <div contenteditable="true" spellcheck="false"></div>
  • Disable via JavaScript:
    element.spellcheck = false;
    element.focus();
    element.blur(); // Force re-evaluation
  • Users can disable in Chrome settings or via context menu.
  • Monitor Chrome updates for performance fixes.
  • Consider implementing custom spell checking thatโ€™s more performant.
  • Break down large documents into smaller sections.

Playground for this case

Use the reported environment as a reference and record what happens in your environment while interacting with the editable area.

Reported environment
OS: Any Any
Device: Desktop or Laptop Any
Browser: Chrome 96
Keyboard: US
Your environment
Sample HTML:
Event log
Use this log together with the case description when filing or updating an issue.
0 events
Interact with the editable area to see events here.