wehub-skill-sync
39 lines
844 B
Markdown
39 lines
844 B
Markdown
---
|
||
title: CSS content-visibility for Long Lists
|
||
impact: HIGH
|
||
impactDescription: 加快初始渲染速度
|
||
tags: 渲染, css, content-visibility, 长列表
|
||
---
|
||
|
||
## CSS content-visibility 应用于长列表
|
||
|
||
对离屏内容应用 `content-visibility: auto`，延迟其渲染。
|
||
|
||
**CSS：**
|
||
|
||
```css
|
||
.message-item {
|
||
content-visibility: auto;
|
||
contain-intrinsic-size: 0 80px;
|
||
}
|
||
```
|
||
|
||
**示例：**
|
||
|
||
```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>
|
||
)
|
||
}
|
||
```
|
||
|
||
对于 1000 条消息，浏览器会跳过约 990 条离屏项的布局/绘制（初始渲染速度提升 10 倍）。
|