Browser Virtualization

1 post · Mar 2025

What this trail covers

Hex has evolved its front-end performance by introducing a custom virtualization solution for its notebooks. This approach, dubbed 'VirtualizedElement,' allows individual cells to manage their own rendering based on viewport proximity, addressing limitations of list-based virtualization libraries like React Virtuoso. This has led to significant improvements in initial render time, interaction lag, page load, render lag, and memory usage, enabling a more performant and scalable user experience.

All Hex trails

Mar 2025How we beat browser bottlenecksThis post details the implementation of a custom 'VirtualizedElement' for Hex notebooks. It describes the limitations of using a list-based virtualization library like React Virtuoso for Hex's tree-like notebook structure and the decision to build a self-contained virtualized element. The implementation uses two react-intersection-observer instances with different margins to control mounting (within 500px) and unmounting (beyond 5000px) of cells, ensuring a stable scroll bar by replacing unmounted cells with placeholders of their actual height. This resulted in significant performance improvements: 90% reduction in initial render time, 33% reduction in interaction lag, 25% reduction in page load, 14% reduction in render lag, and 10% reduction in memory usage.
Advertisement