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脚本语言在网页中的简单应用
May 13 Javascript
javascript firefox兼容ie的dom方法脚本
May 18 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
Aug 24 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
详解JS预解析原理
Jun 16 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
浅谈关于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
php多用户读写文件冲突的解决办法
2013/11/06 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
javascript Prototype 对象扩展
2009/05/15 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
seajs学习之模块的依赖加载及模块API的导出
2016/10/20 Javascript
js实现楼层导航功能
2017/02/23 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
Python 调用DLL操作抄表机
2009/01/12 Python
python ip正则式
2009/05/07 Python
python 简易计算器程序,代码就几行
2009/08/29 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
对Python 文件夹遍历和文件查找的实例讲解
2018/04/26 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
以下的初始化有什么区别
2013/12/16 面试题
行政管理毕业生自荐信
2014/02/24 职场文书
文明生主要事迹
2014/05/25 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
求职自我评价怎么写
2015/03/09 职场文书
《1942》观后感
2015/06/08 职场文书
详解python的异常捕获
2022/03/03 Python