当前位置: 首页 > 科技观察

Content-Visibility再次探索,完美替代Lazyload?

时间:2023-03-12 17:41:58 科技观察

上一篇利用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结构,即在上面的代码基础上插入一些图片资源:...

//...包含N个段落...
相应地设置CSS:.paragraph,.g-img{content-visibility:auto;}刷新页面时,观察网络请求(Network)的状态:即使当前页面可见区域外的内容没有渲染,图片还是会加载!因此,这也引出了一个很重要的结论:content-visibility:auto不能直接替代LazyLoad。content-visibility:auto的元素不会在可见区域外渲染,但其中的静态资源仍然会在页面初始化时被完全加载。所以在实际使用中,如果你的业务已经使用了比较完善的Lazyload来处理长列表或者一些图片资源,那么content-visibility:auto并不是一个更好的选择。探索辅助功能当然,content-visibility:auto的特性引出了另一个有趣的点。如果不渲染可见区域之外的内容,会不会影响用户的全文搜索?毕竟,这是一个非常重要的功能。我们再做一个探索,还是上面的DEMO,我们在开头和结尾添加两个特殊的字符串:

content-visibility:autoforsearchExploration功能影响

...//...包含N个段落...

content-visibility:auto搜索功能影响探索

相应设置CSS:.paragraph,.text{content-visibility:auto;}嗯,这样,页面刷新后,第二个.text处于未渲染状态,我们试试ctrl+F全局搜索,看看能不能发现几个:很有意思的现象,全局搜索的时候,您可以找到当前未呈现的元素中的内容。在这里,我们可以得到另外一个很重要的一点:即使有未渲染的元素设置了content-visibility:auto,也不会影响全局搜索功能。这也是content-visibility在设计上的充分考虑,无障碍功能的考虑,或者说用户体验,都有这一点,对其实际使用有很大的帮助。content-visibility的其他一些问题首先看content-visibility的兼容性(2022-06-03):目前还是比较惨淡的,我也没有实际在业务中使用过,所以需要等待一个尽管。当然,由于这个属性属于渐进增强的功能,所以即使失败了,也完全不会影响页面本身的显示。同时也有同学表示使用content-visibility:auto只能解决部分场景,在海量DOM场景下的实际效果还有待进一步测试。实际使用的时候,多做比较,取舍。当然,现代浏览器越来越智能,类似于content-visibility功能的属性也越来越多。我们在性能优化的道路上有了更多的选择,总是好事。综上所述,在一些需要频繁显示和隐藏的元素上,使用content-visibility:hidden,用户代理不需要重新渲染它和它的子元素,可以有效提高切换时的渲染性能;content-visibility:auto的作用更类似于虚拟列表。使用它可以大大提高长列表和长文本页面的渲染性能;合理使用contain-intrinsic-size估计设置content-visibility:auto元素的高宽,可以有效避免滚动时滚动条的晃动;content-visibility:auto不能直接替代LazyLoad。content-visibility:auto的元素不会在可见区域外渲染,但是里面的静态资源仍然会显示在页面上,在初始化的时候是完全加载的;即使有未渲染的元素设置了content-visibility:auto,也不会影响全局搜索功能。