docs

Appearance

긴 리스트에 CSS content-visibility 사용 ​

Overview ​

Apply content-visibility: auto to defer off-screen rendering.

Impact ​

  • Priority: HIGH
  • Performance: faster initial render

Implementation ​

CSS ​

css
.message-item {
  content-visibility: auto;
  contain-intrinsic-size: 0 80px;
}

Usage Example ​

tsx
function MessageList({ messages }: { messages: Message[] }) {
  return (
    <div className="overflow-y-auto h-screen">
      {messages.map((msg) => (
        <div key={msg.id} className="message-item">
          <Avatar user={msg.author} />
          <div>{msg.content}</div>
        </div>
      ))}
    </div>
  )
}

How It Works ​

  • content-visibility: auto: Skip rendering off-screen elements
  • contain-intrinsic-size: Provide size hint before rendering
  • Browser defers layout/paint

Performance Improvement ​

For 1000 messages:

  • Skips layout/paint for ~990 off-screen items
  • 10× faster initial render

Key Points ​

  • Apply to long lists
  • Improves scroll performance
  • Reduces initial load time
  • CSS-only implementation

Cautions ​

  • Set accurate height with contain-intrinsic-size (prevents scrollbar jump)
  • Be careful with variable-height items
  • Check modern browser support

Use Cases ​

  • Chat message lists
  • News feeds
  • Product listings
  • Comment threads

Tags: rendering, css, content-visibility, long-lists