css 中的 content-visitly 提升渲染性能

content-visibility 新的css属性，可显著提升渲染性能

译文：原文链接：https://web.dev/content-visibility/

本文介绍CSS的新属性 content-visibility ，这个属性可以显著提升渲染性能。

Chromium 85 开始有了 [content-visibility](<https://drafts.csswg.org/css-contain/#propdef-content-visibility>) 属性，这可能是对于提升页面加载性能提升最有效的CSS属性，content-visibility 让用户代理正常情况下跳过元素渲染工作（包括 layout 和 painting ），除非需要的时候进行渲染工作。如果页面有大量离屏（off-screen）的内容，借助 content-visibility 属性可以跳过离屏内容的渲染，加快用户首屏渲染时间，可以做到减少的页面可交互的等待时间

<center>上图中使用了 content-visibility: auto 属性的内容部分，其首次加载渲染（Rendering）提升了近7倍</center>

兼容性

content-visibility 属性依赖于 the CSS Containment Spec ， Containment 浏览器兼容性见 most modern browsers.

下面先介绍一下该属性的在浏览器中的兼容性

CSS content-visibility