如何通过content-visibility属性提升页面渲染效率？

本文共计4530个文字，预计阅读时间需要19分钟。

最近在业务中实际应用了content-visibility，实现了对渲染性能的一些优化。这是一个相对较新的特性，具有强大的功能。本文将深入浅出地讲解一课。

何为content-visibility？content-visibility：属性控属性制元素的可见性，从而提高页面的渲染性能。

content-visibility属性：content-visibility：auto | hidden | visible | contain

- auto：默认值，表示不使用content-visibility特性。- hidden：表示隐藏元素，不渲染任何内容。- visible：表示只渲染可见区域内的内容。- contain：表示只渲染包含区域内的内容。

最近在业务中实际使用 content-visibility 进了一些渲染性能的优化。

这是一个比较新且有强大功能的属性。本文将带领大家深入理解一番。

何为 content-visibility？

content-visibility：属性控制一个元素是否渲染其内容，它允许用户代理（浏览器）潜在地省略大量布局和渲染工作，直到需要它为止。