Vue.js 无限滚动列表性能优化方案


Posted in Javascript onDecember 02, 2019

问题

大家都知道,Web 页面修改 DOM 是开销较大的操作,相比其他操作要慢很多。这是为什么呢?因为每次 DOM 修改,浏览器往往需要重新计算元素布局,再重新渲染。也就是所谓的重排(reflow)和重绘(repaint)。尤其是在页面包含大量元素和复杂布局的情况下,性能会受到影响。那对用户有什么实际的影响呢?

一个常见的场景是大数据量的列表渲染。通常表现为可无限滚动的无序列表或者表格,当数据很多时,页面会出现明显的滚动卡顿,严重影响了用户体验。怎么解决呢?

解决方案

既然问题的根源是 DOM 元素太多,那就想办法限制元素数量。

  • 限制列表对用户可见的元素数量。我们把可见区域称为 ViewPort
  • 当列表滚动时,列表种的其他元素怎么由不可见变为可见?
  • 监听列表容器元素的滚动事件,当列表里的元素进入可视区域,则添加到DOM中
  • 问题是如果一直这么滚下去,列表会越来越大。所以需要在列表元素离开 ViewPort 的时候从DOM中移除
  • 问题又来了,由于 ViewPort 刚好是一屏的大小,滚动的时候元素还没来得及渲染,会出现一段时间的空白。解决办法就是上下增加一部分数据渲染。

Vue.js 无限滚动列表性能优化方案

无限滚动的性能优化方案基本思路就是这样。

在实际项目中,我们可能不需要自己从头实现一个无限滚动列表组件,Vue.js 就有一个现成的轮子:vue-virtual-scroller。

在项目中安装这个插件:

$ npm install -D vue-virtual-scroller

项目入口文件 main.js 引入这个插件:

import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import Vue from "vue";
import VueVirtualScroller from "vue-virtual-scroller";

Vue.use(VueVirtualScroller);

案例一:VirtualList

我们来看一个简单的例子,用vue-virtual-scroller渲染一个包含大量数据的列表。 先用JSON-Generator 生成 5000 条数据的 JSON 对象,并保存到 data.json 文件。可以用下面的规则:

[
 '{{repeat(5000)}}',
 {
  _id: '{{objectId()}}',
  age: '{{integer(20, 40)}}',
  name: '{{firstName()}} {{surname()}}',
  company: '{{company().toUpperCase()}}'
 }
]

新建一个 VirtualList.vue 文件,引入data.json,并将它赋值给组件的items属性。然后套一个 <virtual-scroller>组件:

VirtualList.vue:

<template>
 <virtual-scroller :items="items" item-height="40" content-tag="ul">
  <template slot-scope="props">
   <li :key="props.itemKey">{{props.item.name}}</li>
  </template>
 </virtual-scroller>
</template>

<script>
import items from "./data.json";

export default {
 data: () => ({ items })
};
</script>

virtual-scroller 组件必须设置 item-height 。另外,由于我们要创建一个列表,可以设置content-tag="ul",表示内容渲染成 <ul>标签。

vue-virtual-scroller 支持使用 scoped slots,增加了内容渲染的灵活性。通过使用slot-scope="props",我们可以访问 vue-virtual-scroller 暴露的数据。

props 有一个itemKey属性,出于性能考虑,我们应该在内容部分的根元素上绑定 :key="props.itemKey"。然后我们就可以通过 props.item 拿到 JSON 里的原始数据了。

如果你要给列表设置样式,可以给 virtual-scroller 设置 class属性:

<template>
 <virtual-scroller class="virtual-list" ...></virtual-scroller>
</template>

<style>
.virtual-list ul {
 list-style: none;
}
</style>

或者也可以用scoped 样式,用 /deep/选择器:

<style scoped>
.virtual-list /deep/ ul {
 list-style: none;
}
</style>

案例二: VirtualTable

类似 VirtualList,我们再看一个表格组件VirtualTable: VirtualTable.vue:

<template>
 <virtual-scroller :items="items" item-height="40" content-tag="table">
  <template slot-scope="props">
   <tr :key="props.itemKey">
    <td>{{props.item.age}}</td>
    <td>{{props.item.name}}</td>
    <td>{{props.item.company}}</td>
   </tr>
  </template>
 </virtual-scroller>
</template>

<script>
import items from "./data.json";

export default {
 data: () => ({ items })
};
</script>

这里有个小问题,我们需要增加一个 <thead>标签,用于显示列名: Age, Name 和 Company

幸好 virtual-scroller 支持 slot,可以定制各部分内容:

<main>
 <slot name="before-container"></slot>
 <container>
  <slot name="before-content"></slot>
  <content>
   <!-- Your items here -->
  </content>
  <slot name="after-content"></slot>
 </container>
 <slot name="after-container"></slot>
</main>

这些 slot 都可以放置自定义内容。container 会被 container-tag 属性值替换,默认是div,content 被 content-tag 值替换。

这里用 before-content slot 加一个thead 就行了:

<template>
 <virtual-scroller
  :items="items"
  item-height="40"
  container-tag="table"
  content-tag="tbody"
  >
   <thead slot="before-content">
    <tr>
     <td>Age</td>
     <td>Name</td>
     <td>Company</td>
    </tr>
   </thead>
   <template slot-scope="props">
    <tr :key="props.itemKey">
     <td>{{props.item.age}}</td>
     <td>{{props.item.name}}</td>
     <td>{{props.item.company}}</td>
    </tr>
   </template>
 </virtual-scroller>
</template>

请注意,我们把content-tag="table" 改成了content-tag="tbody",因为我们设置了container-tag="table",这是为了构造table 标签的常规结构。

如果要加一个 tfoot,应该知道怎么做了吧。

总结

我们了解了无限滚动列表的性能优化原理,以及利用vue-virtual-scroller Vue 插件创建了 VirtualList 和  VirtualTable 组件。如果用它们来展示前面生成的 5000 条数据,应该可以比较流畅地渲染和滚动了。更多用法可以参考 vue-virtual-scroller 文档 。

文章涉及的源码 戳这里。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
vue如何进行动画的封装
Sep 26 Javascript
vue接入腾讯防水墙代码
May 07 Javascript
小程序跨页面交互的作用与方法详解
Jan 07 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 #Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 #Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 #Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 #Javascript
VUE 动态组件的应用案例分析
Dec 02 #Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 #Javascript
vue 动态表单开发方法案例详解
Dec 02 #Javascript
You might like
yii插入数据库防并发的简单代码
2017/05/27 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
Ajax::prototype 源码解读
2007/01/22 Javascript
javascript静态的url如何传递
2007/05/03 Javascript
firefo xml 读写实现js代码
2009/06/11 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
JavaScript实现网页头部进度条刷新
2017/04/16 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
python3 线性回归验证方法
2019/07/09 Python
Pycharm 文件更改目录后,执行路径未更新的解决方法
2019/07/19 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
java关于string最常出现的面试题整理
2021/01/18 Python
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
信息部岗位职责
2013/11/12 职场文书
自我评价中英文语句
2013/11/30 职场文书
数控专业推荐信范文
2013/12/02 职场文书
英文自荐信
2013/12/15 职场文书
内蒙古鄂尔多斯市市长寄语
2014/04/10 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技