150 000 nodes in a Virtual DOM? No problem!
summary
A document viewer is implemented in Elm using a Virtual DOM and manages pages that start near 250,000 nodes and are reduced to about 115,000 nodes through node removal and smarter rendering. Key tactics are preprocessing to precompute virtual nodes, replacing list virtualization with full render plus laziness/memoization on grouped chapter state, eliminating inline SVGs and extra wrappers, and using content-visibility: auto to avoid full layout work. The result is a working app that runs smoothly even under 20x CPU slowdown.
AI-written summary · about
chapters (16)
- 0:00Introduction
- 2:33Large legal docs rendering
- 5:06Virtual DOM reconciliation costs
- 7:18Performance for real users
- 9:21List virtualization limits
- 11:31Removing list virtualization
- 13:56Algorithmic improvements
- 15:21Pre-processing static elements
- 19:16Performance gains from pre-processing
- 19:37DOM size reduction
- 22:53Further DOM simplification
- 23:37Grouped state updates
- 25:48CSS engine bottleneck
- 27:37CSS layout with content visibility
- 29:00Final performance results
- 29:42Q&A
