Large document performance

Large Document Performance

Use this skill when optimizing visual editors, block documents with hundreds or thousands of blocks, or spatial canvases with many interactive elements.

Keep Keystroke and Pointer Latency Under 16 ms

1. Localize Re-Renders to Modified Blocks Only:
   • Typing inside a single paragraph must never re-render all 500 sibling blocks in the document.
   • Use immutable structural sharing (Node identity in ProseMirror/Lexical or keyed block store selectors by blockId) and memoized block components so unchanged subtrees skip re-rendering completely.
2. Decouple Selection/Toolbar Updates from Document Tree Renders:
   • Cursor movement (selectionUpdate) fires on every arrow key and click.
   • Subscribe floating toolbars and format buttons only to derived boolean/primitive formatting state (e.g., isBold, activeBlockType) rather than re-rendering the entire editor shell on every caret move.
3. Never Serialize the Full Document Synchronously on Every Keystroke:
   • Converting a large document tree to JSON or HTML (editor.getJSON(), editor.getHTML()) on every input event blocks the main thread and causes typing lag.
   • Perform full serialization lazily: inside debounced autosave callbacks, idle frames, or background workers, or serialize only dirty subtrees.

Drag, Canvas & Viewport Optimization

• Ephemeral Transform Previews During Drag/Resize:
  • During pointer drag or canvas pan/zoom, update GPU-composited transforms (transform: translate3d(...)) or a lightweight drag overlay layer at requestAnimationFrame cadence instead of mutating and re-layouting the full document tree on every pointermove.
• Spatial Indexing & Viewport Culling:
  • For canvases with hundreds of nodes, maintain Axis-Aligned Bounding Boxes (AABBs) in a spatial index (such as an R-tree / quadtree) so hit-testing, marquee selection, snapping, and viewport culling only inspect visible/nearby elements.
  • For very long block documents or block pickers, virtualize off-screen heavy embeds (charts, code editors, high-res media) while keeping native browser find/selection behavior clear.

Checklist

• Does typing in one block re-render only that block (and affected ancestors) rather than the entire document?
• Is full JSON/HTML serialization deferred to debounced save/export paths rather than running on every keystroke?
• Are toolbar/inspector subscriptions scoped to minimal derived state so cursor moves stay fast?
• Do drag, pan, and zoom gestures use lightweight transform previews and spatial culling on large documents?