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
- Create a contenteditable div with large amount of content (10,000+ words).
- Use Chrome version 96 or later.
- Type characters in the contenteditable element.
- Observe sluggish typing and high CPU usage.
- 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.