vue针对滚动元素内部大量元素,但只有部分元素可见,对dom懒渲染,节省内存的优化

我们开发过程中经常会遇到这样的需求,一个数据量很大的列表。
遇到,如果你有一个列表,
我们以百度信息流为例子


vue针对滚动元素内部大量元素,但只有部分元素可见,对dom懒渲染,节省内存的优化_第1张图片
image.png

页面打开,加载第一页的数据,每次往下滚屏到接近底部,会加载下一屏,这样也是保证获取数据的http请求量是按需加载的。图片懒加载,也能节省流量的资源。但是,随着我们一直加载,产生的dom会越来越多。内存占用也会越来越高


vue针对滚动元素内部大量元素,但只有部分元素可见,对dom懒渲染,节省内存的优化_第2张图片
image.png

还有我们常见的列表,很多情况下我们通过分页来加载,但是有些情况下,比如不能使用分页,这时候如果有千上万的数据,就会产生大量的虚拟dom和真实dom,大量占用内存


vue针对滚动元素内部大量元素,但只有部分元素可见,对dom懒渲染,节省内存的优化_第3张图片
c86bf1c1-c4e1-4103-a1e4-bc15c3d5ef61.gif

如果说上面的列表我们还能通过分页解决,那么Select选择框,如果有成千上万的选项,即使我们使用了滚动加载,滚动到最后也还是会产生大量的dom,我本地测试了1万条选项的下拉框,卡顿显现非常明显,点击后需要2s才能展开选项,并且我的笔记本风扇已经开始呼呼排风了。


vue针对滚动元素内部大量元素,但只有部分元素可见,对dom懒渲染,节省内存的优化_第4张图片
image.png

vue针对滚动元素内部大量元素,但只有部分元素可见,对dom懒渲染,节省内存的优化_第5张图片
image.png

这三类问题都有一个相似点,大量的并列的dom,但是这些dom都在一个可滚动的容器中,无论怎么滚动,只有一部分是可见的,


vue针对滚动元素内部大量元素,但只有部分元素可见,对dom懒渲染,节省内存的优化_第6张图片
未标题-1.jpg

所以如果只有可见的数据才去创建虚拟dom,就会大量节省内存,并加快渲染速度。

我们以列表来作为例子,展示解决方案


vue针对滚动元素内部大量元素,但只有部分元素可见,对dom懒渲染,节省内存的优化_第7张图片
image.png



我们做一点改动,通过代码生成一个10000条的list




根据这个想法设计的解决方案,思路有几个关键点。
1、假滚动事件:拖动滚动滑块,并不会影响左侧的真实滚动,只是记录滚动的位置。
2、根据滚动的位置,计算出对应的数据区间段,比如应该取340-350这10条。
3、根据滚动位置,和数据区间,把这几条数据控制绝对定位,来模拟滚动效果。

第一步:假滚动事件


我们的每一行高度是40,那么我们创建一个高度时list.length*40的空元素,那么这个空元素的高度,跟展示所有的list的高度一样,也就是说右侧的滚动条效果跟原来的效果是一样的。


vue针对滚动元素内部大量元素,但只有部分元素可见,对dom懒渲染,节省内存的优化_第8张图片
image.png

第二步,根据滚动的位置,计算出对应的数据区间段

我们需要计算开始index和长度,然后截取list数据的一部分




de5555a3-508a-40ca-bef2-199b58d322df.gif

我们根据开始和结束需要,生成一个splitData,然后再把新生成的dom通过绝对位置调整。


vue针对滚动元素内部大量元素,但只有部分元素可见,对dom懒渲染,节省内存的优化_第9张图片
image.png

完成的效果


4fd819ec-9f0b-49e3-b904-51cd9ac10688.gif

我们可以看到,无论怎么滚动,效果跟全部加载是一样的,但是通过右侧的控制台发现,dom数量只有固定的这几个,但是每个dom内部的值在不停的修改。

完整的代码





你可能感兴趣的:(vue针对滚动元素内部大量元素,但只有部分元素可见,对dom懒渲染,节省内存的优化)