上一篇利用content-visibility优化渲染性能的文章发表后,收到了很多同学的反馈和讨论。有几点我没有解释清楚。本文将继续讨论content-visibility两个很有意思的点:content-visibility:auto能否完全取代传统的延迟加载LazyLoad?content-visibility:auto会影响用户的搜索吗?在阅读本文之前,如果您还没有阅读上一篇,我强烈建议您先阅读它,否则您可能会有些困惑:使用内容可见性优化渲染性能。这是一个相对较新且功能强大的属性。content-visibility:autoVSLazyLoad那么,content-visibility:auto能否替代LazyLoad(延迟加载)呢?先来看看我们平时对LazyLoad(延迟加载)的定义。LazyLoad:一般来说,LazyLoad的作用是当页面没有滚动到对应区域时,不会加载该区域的资源(网络请求)。反之,当页面滚动到相应区域时,会发起对相关资源的请求。然后,如果content-visibility:auto是为了能够取代LazyLoad,就需要这样做。初始化渲染时,content-visibility:auto设置在页面当前显示范围之外的元素中的一些静态资源不会被加载显示。这里我尝试做一个简单的DEMO:还是用上面的代码,假设我们有如下HTML结构,即在上面的代码基础上插入一些图片资源:
