仅使用 CSS 属性即可提高页面速度！

谷歌刚刚发布了 Chrome 85，这是该浏览器在 2020 年的重大更新。与之前的重大更新一样，Chrome 也进行了一系列修复并推出了新功能。其中content-visibility: auto还包括：

当我们为浏览器开发网站或页面时，需要几个步骤来渲染或向用户显示页面。浏览器在绘制网站的第一个像素之前，要经过多个处理过程。之后，它会对整个页面执行这些处理过程，包括那些尚未显示或尚未在视口中显示的内容或元素。

Chrome 85 发布后，开发者现在可以通过使用content-visibility: auto元素轻松缩短此过程。此 CSS 属性告诉浏览器可以跳过特定元素，直到其滚动到视口为止。

#element {
    content-visibility: auto;
}

我已经将它应用到我的一个项目中，性能比以前有了显著提升。之前 Lighthouse 的速度是 66。但应用content-visibility: auto到稍后滚动的元素上后，性能提升到了 83。这真是太棒了！

因此，现在就开始使用它并在评论部分讨论您的体验。