About this episode
The episode discusses optimizing file lists in the 2.0 Editor using IntersectionObserver for better performance.
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
Topics covered
- File List Optimization
- Performance
- IntersectionObserver
- Virtualization
- DOM Management
Keywords
- file optimization
- performance
- IntersectionObserver
- virtualization
- DOM
- event listeners
- drag and drop
More episodes of CodePen Radio
- 428: Billing · June 9, 2026
- 427: Next.js and The Journey of SSR · June 2, 2026
- 426: Browserslist in CodePen 2.0 · May 27, 2026
- 425: Debug Logs · May 12, 2026
- 423: 2.0 Templates · April 22, 2026
- 422: Supporting Packages · April 14, 2026
Explore listener stats, chart rankings, contacts and more on the CodePen Radio podcast page.