424: File List Optimization

The 2.0 Editor can support hundreds of files per Pen, not to mention folders mixed in which don't count toward that total. This can be pretty weighty on the DOM and thus adversely affect performance. Especially as each file/folder has children, a variety of event listeners, are drag and drop enabled, etc. "Virtualizing" data like this is a common approach, but we've found if we just use IntersectionObserver to see if they are visible or not, "freeze" them if they aren't, and fade them in and out of life, it's a great solution. Time Jumps

You can listen to 424: File List Optimization online on Radio and Podcast. Open the player on this page to stream the available audio.

424: File List Optimization is an episode from CodePen Radio by CodePen Blog.

This episode is 0:00 long.

This episode was published on Apr 29, 2026.

Yes. Use the heart button on the episode page to add it to your favorite episodes list.

Yes. This page shows related episodes from CodePen Radio when more episodes are available from the podcast feed.