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 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
ES6知识点整理之数组解构和字符串解构的应用示例
Apr 17 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
详解WordPress开发中的get_post与get_posts函数使用
2016/01/04 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
python中的闭包用法实例详解
2015/05/05 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
python删除某个目录文件夹的方法
2020/05/26 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
详解HTML5通讯录获取指定多个人的信息
2016/12/20 HTML / CSS
世界上最好的足球商店:Unisport
2019/03/02 全球购物
护士的岗位职责
2013/12/04 职场文书
行政主管职责范本
2014/03/07 职场文书
乡镇交通安全实施方案
2014/03/29 职场文书
岗位明星事迹材料
2014/05/18 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
卖房授权委托书样本
2014/10/05 职场文书
撤诉状格式范本
2015/05/19 职场文书
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技