When a developer imports a massive monorepo into NitroIDE, the Virtual File System might contain over 100,000 nested files and folders. If we render 100,000 <div> elements into the sidebar, the browser's layout engine will freeze for 10 seconds attempting to calculate the geometry of the page. Traditional workarounds involve complex JavaScript "Virtual Scrolling" libraries, which are prone to jitter and break native browser find-in-page (Cmd+F) functionality.
We eliminated JS virtual scrolling entirely. NitroIDE leverages the modern CSS content-visibility property to push the DOM culling workload down to the browser's native C++ rendering engine.
By applying content-visibility: auto to the parent containers of collapsed folders, we instruct the browser to completely skip the rendering, layout, and painting phases for any elements that are currently off-screen. The browser technically knows the DOM nodes exist, but it spends zero CPU cycles drawing them.
Maintaining Scrollbar Integrity: The danger of skipping layout is that the browser doesn't know how tall the hidden content is, causing the scrollbar to wildly jump around. We fix this using contain-intrinsic-size, providing a placeholder dimension so the scrollbar remains perfectly stable even when 99,000 files are culled from the GPU.
The greatest advantage of content-visibility over JavaScript virtual scrolling is accessibility. Because the DOM nodes physically exist in the document (just unrendered), when a user presses Cmd+F and types a filename, the browser natively searches the hidden nodes. When a match is found, the browser automatically renders the node and scrolls it into view. True native performance.
Import a massive codebase and experience native CSS DOM culling.
Launch Workspace