惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

月光博客
月光博客
人人都是产品经理
人人都是产品经理
C
Check Point Blog
大猫的无限游戏
大猫的无限游戏
小众软件
小众软件
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
博客园 - 聂微东
Help Net Security
Help Net Security
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
L
LINUX DO - 最新话题
Cloudbric
Cloudbric
博客园 - Franky
阮一峰的网络日志
阮一峰的网络日志
O
OpenAI News
V2EX - 技术
V2EX - 技术
H
Hacker News: Front Page
Hacker News: Ask HN
Hacker News: Ask HN
Google DeepMind News
Google DeepMind News
PCI Perspectives
PCI Perspectives
爱范儿
爱范儿
Hacker News - Newest:
Hacker News - Newest: "LLM"
Martin Fowler
Martin Fowler
S
Schneier on Security
Webroot Blog
Webroot Blog
Know Your Adversary
Know Your Adversary
云风的 BLOG
云风的 BLOG
H
Help Net Security
I
InfoQ
Simon Willison's Weblog
Simon Willison's Weblog
雷峰网
雷峰网
J
Java Code Geeks
V
Visual Studio Blog
MyScale Blog
MyScale Blog
C
CXSECURITY Database RSS Feed - CXSecurity.com
C
CERT Recently Published Vulnerability Notes
Google Online Security Blog
Google Online Security Blog
Spread Privacy
Spread Privacy
有赞技术团队
有赞技术团队
The GitHub Blog
The GitHub Blog
Engineering at Meta
Engineering at Meta
V
V2EX
Apple Machine Learning Research
Apple Machine Learning Research
www.infosecurity-magazine.com
www.infosecurity-magazine.com
A
About on SuperTechFans
S
SegmentFault 最新的问题
H
Hackread – Cybersecurity News, Data Breaches, AI and More
TaoSecurity Blog
TaoSecurity Blog
WordPress大学
WordPress大学
S
Securelist
P
Proofpoint News Feed

CodePen

433: CodePen 2.0 is Backward Compatible with Any Classic Pen or Project 432: Trends of 2026 (So Far) 431: Versions are Deeply Integrated into CodePen Chris’ Corner: Layers of Layers 430: The Wild World of Keyboard Shortcuts in Web Apps Chris’ Corner: Makin’ Stuff 429: Why CodePen Rebuilt Its Realtime Service Chris’ Corner: The Edge, Man 428: Improving The Entire Billing System (is Very Worth It) Chris’ Corner: Design Chris’ Corner: A11Y 427: Next.js and The Journey of SSR 426: Browserslist in CodePen 2.0 Chris’ Corner: Finding Type Chris’ Corner: View Transitions 425: Help Your Users Help You with Debug Logs Chris’ Corner: Check It B4 U Wreck It Chris’ Corner: Import Maps Chris’ Corner: ZIP first? 423: 2.0 Templates Chris’ Corner: URLs 422: Supporting Packages Chris’ Corner: Share What You Do 421: View Control of the 2.0 Editor Chris’ Corner: Design Chris’ Corner: Even Grids Chris’ Corner: Processing 420: What are Blocks? Chris’ Corner: Anchors 419: Why 2.0? Chris’ Corner: Cool Things Chris’ Corner: SVG Tools 418: CodeMirror 6 Chris’ Corner: All Together Now Chris’ Corner: Light & Boxes Chris’ Corner: Lovingly Esoteric CSS Chris’ Corner: Type Chris’ Corner: Two Liners Chris’ Corner: Type Chris’ Corner: Freshly-Fallen CSS Chris’ Corner: Cloud Four Chris’ Corner: HTML Chris’ Corner: Web Components Chris’ Corner: Kagi Blog Typography 417: Iframe Allow Attribute Saga Chris’ Corner: Cursors Chris’ Corner: Browser Feature Testing 416: Upgrading Next.js & React Chris’ Corner: AI Browsers 415: Babel Choices 414: Apollo (and the Almighty Cache) Google Chrome & Iframe `allow` Permissions Problems Chris’ Corner: Stage 2 413: Still indie after all these years Chris’ Corner: Design (and you’re going to like it) 412: 2.0 Embedded Pens Chris’ Corner: Discontent 411: The Power of Tree-Sitter Chris’ Corner: Word Search 410: Trying to help humans in an industry that is becoming increasingly non-human Chris’ Corner: Little Bits of CSS 409: Our Own Script Injection Chris’ Corner: Terminological Fading 408: Proxied Third-Party JavaScript Chris’ Corner: Simple, Accessible Multi-Select UI 407: Our Own CDN Chris’ Corner: Clever Clever 406: Hot Trends of 2025 Chris’ Corner: Pretty Palettes 405: Elasticsearch → Postgres Search Chris’ Corner: Faces Chris’ Corner: Browser Wars Micro Edition 404: Preventing Infinite Loops from Crashing the Browser Chris’ Corner: Scroll-Driven Excitement 403: Privacy & Permissions Chris’ Corner: AI for me, AI for thee 402: Bookmarks Chris’ Corner: We Can Have Nice Things 401: Outgoing Email Chris’ Corner: Tokens Chris’ Corner: Modern CSS Features Coming Together Chris’ Corner: Liquid Ass Chris Corner: For The Sake of It Chris’ Corner: Type Stuff! Chris’ Corner: Doing a Good Job Chris’ Corner: Design Do’s and Don’ts Chris’ Corner: CSS Deep Cuts Chris’ Corner: GSAP, more like FREESap Chris’ Corner: Reacting Chris’ Corner: Rounded Triangle Boxes and Our Shapely Future Chris’ Corner: Fairly Fresh CSS Chris’ Corner: 10 HTML Hits Chris’ Corner: CSS Powered Componentry Chris’ Corner: The New Web Safe Chris’ Corner: PerformanCSS Chris’ Corner: Color Accessibility Chris’ Corner: onChange Chris’ Corner: Accessible Takes Chris’ Corner: Creative Coding
424: File List Optimization
Chris Coyier · 2026-04-29 · via CodePen

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

  • 00:00:42 Files in the 2.0 Editor
  • 00:06:26 Virtualization and optimization
  • 00:10:49 The IntersectionObserver API

Video Subscribe on YouTube