设为首页 - 加入收藏 站长在线 - 常用服务器软件 - 在线站长工具 - 在线伪原创工具
您的当前位置:主页 > 网络教程 > JavaScript > 正文

Vue.js 无穷转动列表机能优化方案

来源:未知 编辑:枫少 时间:2019-12-08

题目

众所周知,修改网页的DOM是一项昂贵的操纵,比其他操纵要慢得多。 为什么是这样? 因为每次修改DOM时,赏识器凡是必要从头计较元素机关,然后从头泛起。 这称为重排和重涂。 出格是假如页面包括很多元素和伟大的机关,则机能也许会受到影响。 对用户的现实影响是什么?

一个常见的场景是大数据量的列表渲染。凡是示意为可无穷转动的无序列表可能表格,当数据许多时,页面会呈现明明的转动卡顿,严峻影响了用户体验。怎么办理呢?

办理方案

既然题目的来源是 DOM 元素太多,那就想步伐限定元素数目。

  • 限定列表对用户可见的元素数目。我们把可见地区称为 ViewPort
  • 当列表转动时,列表种的其他元素怎么由不行见变为可见?
  • 监听列表容器元素的转动变乱,当列内外的元素进入可视地区,则添加到DOM中
  • 题目是假如一向这么滚下去,列表会越来越大。以是必要在列表元素分开 ViewPort 的时辰从DOM中移除
  • 题目又来了,因为 ViewPort 恰恰是一屏的巨细,转动的时辰元素还没来得及渲染,会呈现一段时刻的空缺。办理步伐就是上下增进一部门数据渲染。

这是无穷转念头能优化方案的根基头脑。

在现实项目中,我们也许不必要本身从新实现一个无穷转动列表组件,Vue.js 就有一个现成的轮子:vue-virtual-scroller。

在项目中安装这个插件:

?
1
$ npm install -D vue-virtual-scroller

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

?
1
2
3
4
5
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 文件。可以用下面的法则:

?
1
2
3
4
5
6
7
8
9
[
 '{{repeat(5000)}}',
 {
  _id: '{{objectId()}}',
  age: '{{integer(20, 40)}}',
  name: '{{firstName()}} {{surname()}}',
  company: '{{company().toUpperCase()}}'
 }
]

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

VirtualList.vue:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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属性:

?
1
2
3
4
5
6
7
8
9
<template>
 <virtual-scroller class="virtual-list" ...></virtual-scroller>
</template>
 
<style>
.virtual-list ul {
 list-style: none;
}
</style>

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

?
1
2
3
4
5
<style scoped>
.virtual-list /deep/ ul {
 list-style: none;
}
</style>

案例二: VirtualTable

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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,,可以定制各部门内容:

?
1
2
3
4
5
6
7
8
9
10
11
<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 就行了:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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 文档 。

文章涉及的源码 戳这里。

以上就是本文的所有内容,但愿对各人的进修有所辅佐,也但愿各人多多支持站长在线。


TAG标签:

相关推荐:

网友评论:

文章右边250
Top