skillhub-088-vercel-react-best-practices/rules/rendering-content-visibility.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
CSS content-visibility for Long Lists	HIGH	加快初始渲染速度	渲染, css, content-visibility, 长列表

CSS content-visibility 应用于长列表

对离屏内容应用 content-visibility: auto，延迟其渲染。

CSS：

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

示例：

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>
  )
}

对于 1000 条消息，浏览器会跳过约 990 条离屏项的布局/绘制（初始渲染速度提升 10 倍）。