CSS content-visibility 的工作原理及其如何提升渲染性能
内容提要
文章通过150个内容繁重卡片的实验，测试了CSS属性`content-visibility: auto`的效果。该属性让浏览器跳过视口外内容的渲染工作，实测Chrome DevTools中Rendering活动从42ms降至20ms，约减少52%。但跳过渲染会导致布局尺寸未知，需配合`contain-intrinsic-size`提供占位尺寸，避免滚动时布局偏移。该属性不同于懒加载：前者跳过渲染，后者延迟加载资源。内容仍保留在DOM和无障碍树中，并非隐藏机制。适用于长列表、信息流等大量屏外内容场景，已纳入Baseline 2024。
延伸解读
性能提升的边界：52% 仅限特定场景
文章实测的 52% 渲染活动减少，是在 150 个内容繁重卡片、固定视口且不滚动的条件下得到的。作者明确提醒，这个数字不代表网站整体速度提升，也不应直接套用到其他页面。实际效果取决于屏外内容的数量、渲染成本、浏览器、设备等因素。因此，content-visibility 的价值在于为浏览器提供跳过非必要渲染的机会，而非保证固定的性能收益。
布局占位：contain-intrinsic-size 的作用与选择
跳过渲染会导致浏览器无法立即获知元素尺寸，可能引发布局偏移。contain-intrinsic-size 提供回退尺寸，其中 auto 关键字允许浏览器在元素首次渲染后记住实际尺寸，后续再次跳过时复用。文章测试了 100px、900px、2000px 三种回退值，渲染活动差异很小，说明回退值的主要作用是维持布局稳定，而非追求性能数字。选择接近实际内容的合理估值即可。
与懒加载的区别：渲染优化而非资源加载
content-visibility 和懒加载都旨在避免不必要的工作，但目标不同。懒加载主要延迟资源加载，例如图片的 loading="lazy"；content-visibility 则让浏览器跳过屏外内容的渲染工作，元素仍在 DOM 中，资源可能已加载。两者可以共存：一个控制资源何时加载，另一个控制内容何时渲染。理解这一区别有助于在正确场景选用合适的优化手段。
无障碍与适用场景：渲染优化不是隐藏机制
被跳过的屏外内容仍保留在 DOM 和无障碍树中，因此 content-visibility 不能用于隐藏内容。若需对辅助技术隐藏，应使用适当的语义或 CSS。此外，web.dev 指出跳过子树中的内容可能仍出现在无障碍树中，即使原本会被 display: none 隐藏。该属性适合长列表、信息流、文档等大量屏外内容的页面，且已纳入 Baseline 2024，现代浏览器支持良好。
Q&A
content-visibility: auto 具体是做什么的？
content-visibility: auto 允许浏览器在元素内容与用户不相关时（例如远离视口）跳过其渲染工作。它通过 CSS 包含（布局、样式和绘制包含）实现，元素仍保留在 DOM 中，资源可能已加载，只是渲染被跳过。
content-visibility: auto 能提升多少渲染性能？
在包含 150 个内容繁重卡片的实验中，添加 content-visibility: auto 后，Chrome DevTools 中 Rendering 活动的中位数从 42ms 降至 20ms，减少了约 52%。但该结果仅适用于该特定测试环境，不代表所有网站都能获得相同提升。
为什么使用 content-visibility 后需要配合 contain-intrinsic-size？
因为跳过渲染会导致浏览器不知道元素的实际尺寸，可能引起布局偏移。contain-intrinsic-size 提供一个回退的固有尺寸（如 auto 900px），在内容被跳过且无记忆尺寸时使用，避免滚动时布局跳动。
content-visibility 和懒加载有什么区别？
懒加载主要延迟加载资源（如图片），而 content-visibility 是跳过渲染工作。元素可能已在 DOM 中且资源已加载，但浏览器可以决定不渲染其内容。两者可以同时使用，解决不同问题。
content-visibility: auto 会影响无障碍访问吗？
不会直接隐藏内容。被跳过渲染的屏外内容仍保留在 DOM 和无障碍树中。但需注意，在复杂或交互区域使用时应测试键盘和辅助技术体验，因为跳过子树中的内容可能仍出现在无障碍树中，即使原本会被 display: none 等隐藏。
什么场景下适合使用 content-visibility: auto？
适合页面包含大量屏外昂贵内容的场景，如长文章、社交信息流、大型产品列表、多章节文档、长仪表盘等。如果页面很小且内容几乎立即可见，则可能没有太多渲染工作可跳过。
