在Vue.js中创建一个高性能的虚拟滚动列表 2021-11-18 默认分类 暂无评论 10167 次阅读 ![create-performant-virtualized-lists-vue.png](http://www.guobacai.com/usr/uploads/2021/11/1302306572.png) 单独渲染DOM上的项目会给用户带来明显的性能滞后,特别是当他们滚动浏览大型列表时。为了使滚动更有效,我们应该使用虚拟滚动列表,这样可以提高页面的加载速度,防止网络应用的卡顿。 虚拟滚动列表类似于标准的滚动列表,然而,在任何时候都只有用户当前视图中的数据被呈现出来。当用户向下滚动页面时,新的项目会随着旧的项目被删除而被呈现出来。 在这篇文章中,我们将探讨vue-virtual-scroll-list,一个用于在Vue.js中创建虚拟滚动列表的神奇库。让我们开始吧! 在vue-virtual-scroll-list中**渲染内容** vue-virtual-scroll-list库有两种主要的方法来将网页内容渲染成一个列表,即 item 模式和 v-for 模式。 item模式是渲染静态内容的理想选择。一旦内容被追加到DOM上,item模式就会释放出正在使用的内存。如果你改变了数据,你需要调用 forceRender() 并重新开始这个过程。 要渲染动态内容,更好的选择是v-for模式。在v-for模式下,提供给列表的数据在内存中被引用。因此,当数据发生变化时,列表项会被重新渲染,并且上下文被保持。 让我们仔细看看vue-virtual-scroll-list库,比较一下使用和不使用虚拟滚动列表的项目模式的性能。 首先,我们将建立一个新的Vue.js项目并安装vue-virtual-scroll-list。然后,我们将使用随机生成的数据创建一个列表。最后,我们将在有和没有虚拟滚动的情况下渲染我们的列表,比较各自的性能。 ## 设置一个Vue.js项目 首先,确保你的机器上安装了Vue.js。用以下命令创建一个新的Vue.js项目。 ``` vue create virtual-scroll-demo ``` 一旦项目设置完毕,安装vue-virtual-scroll-list库 ``` npm install vue-virtual-scroll-list --save ``` 现在,我们的项目有如下结构: ![new-vue-project-structure.png](http://www.guobacai.com/usr/uploads/2021/11/2166091721.png) ## 生成一个列表 现在我们有了项目的基础,让我们开始为创建我们的两个列表打基础。 导航到你的/src文件夹,创建一个名为data.js的文件。让我们把下面这个生成随机数据的简单函数添加到 data.js 中: ``` let idCounter = 0; export function getData(count) { const data = []; for (let index = 0; index < count; index++) { data.push({ id: String(idCounter++), text: Math.random() .toString(16) .substr(10), }); } return data; } ``` 接下来,我们将创建一个名为Item.vue的新文件,它是我们要渲染的项目组件。在Item.vue中,我们将包括以下代码块,它为我们的列表创建一个模板和样式,以及检索和显示上面生成的数据的道具 ``` {{ source.id }} - {{ source.text }} ``` ## 渲染一个没有虚拟滚动的列表 现在我们已经创建了一个列表,让我们在不使用vue-virtual-scroll-list的情况下在我们的DOM上渲染列表项。在App.vue中添加以下代码: ``` {{item}} ``` 在上面的代码块中,我们在DOM中渲染了100,000个item。让我们看看在这么多数据和没有虚拟滚动的情况下,我们的列表将如何表现。用下面的npm命令启动该项目: ``` npm run serve ``` 我们将得到如下结果 ![list-item-render-standard-scroll.png](http://www.guobacai.com/usr/uploads/2021/11/3045816583.png) 当我们在浏览器中检查检查元素时,我们会看到所有的HTML元素都被追加到浏览器的DOM中,如下图所示 ![browser-inspect-element-html-output.png](http://www.guobacai.com/usr/uploads/2021/11/2394761062.png) 在浏览器DOM中追加元素会增加DOM的大小。因此,浏览器将需要更多的时间来追加每一个项目到DOM中,可能会造成明显的性能滞后。让我们仔细观察一下浏览器将我们的列表追加到DOM中所花费的时间。 ![standard-list-component-browser-dom-load-time.png](http://www.guobacai.com/usr/uploads/2021/11/4182745924.png) 事件DOMContentLoaded在22秒后触发,意味着浏览器标签在显示最终渲染的列表之前需要22秒的加载时间。同样,从下面的图片中可以看出,渲染我们的列表消耗了128MB的内存 ![standard-list-component-browser-dom-memory-consumption.png](http://www.guobacai.com/usr/uploads/2021/11/2411134564.png) ## 用虚拟卷轴渲染一个列表 现在,让我们试着用虚拟滚动来渲染我们的列表。在main.js中导入vue-virtual-scroll-list包 ``` import Vue from "vue"; import App from "./App.vue"; Vue.config.productionTip = false; import VirtualList from "vue-virtual-scroll-list"; Vue.component("virtual-list", VirtualList); new Vue({ render: (h) => h(App), }).$mount("#app"); ``` 接下来,我们将为虚拟列表组件内的item渲染数据。让我们改变我们的App.js文件,使其看起来像下面的代码块 ``` ``` 注意,数据道具是虚拟列表渲染item所需要的。运行上面的代码块将给我们带来以下输出 ![virtual-scroll-component-output.png](http://www.guobacai.com/usr/uploads/2021/11/1359083636.png) 我们可以在下面的图片中看到,一次只渲染了几个item。当用户向下滚动时,更多的item被呈现出来。 ![virtual-scroll-item-render-order.png](http://www.guobacai.com/usr/uploads/2021/11/2794142086.png) 现在,我们的DOM树比以前小多了 当我们渲染我们的虚拟滚动列表时,DOMContentLoaded会比以前快得多! ![virtual-scroll-list-dom-render-time.png](http://www.guobacai.com/usr/uploads/2021/11/2777082900.png) 如上图所示,该事件仅在563毫秒内触发。同样地,我们的操作只消耗了79MB的内存,这比我们没有使用虚拟卷轴时要少得多 ![virtual-scroll-list-dom-memory-consumption.png](http://www.guobacai.com/usr/uploads/2021/11/2615035936.png) # 总结 现在你知道如何使用vue-virtual-scroll-list库在Vue.js中创建一个虚拟滚动的列表了吧! 在本教程中,我们创建了一个使用随机生成的数据的静态列表,然后在我们的Vue.js应用程序中实现了它,比较了它使用和不使用虚拟滚动的性能。 虚拟滚动列表的性能很高,特别是当你的网页上有大量的项目列表时。使用虚拟滚动列表可以提高页面的加载速度,并全面改善用户体验 标签: vue, npm, 网络, 列表, 滚动, 渲染, item
评论已关闭