这次项目经验会谈谈经常在项目中，针对成千上万数据渲染优化的不断探索来谈谈自己的体会，其目的就是保证用户浏览上万条数据的时候，UI要很流畅，确保用户操作过程中不会出现UI卡顿或者最糟糕的情况，直接浏览器奔溃。

 

其优化目录如下，由于内容很多，会分两篇文章进行研究，

 

本文章主要会围绕如何设计一个虚拟滚动来渲染成千上万的数据。

 

1.表格布局（To be continue）

 

2.Reflow & Repaint渲染方式（TBC）

 

3.浏览器API：window.requestAnimationFrame 渲染优化（TBC）

 

4.虚拟滚动：Virtual scrolling

 

GITHUB-Vue Table表格渲染上千数据 ： 后续会加入Filter功能，针对Reflow和RequestAnimationFrame的渲染效果会更加明显

 

虚拟滚动（Virtual scrolling）篇

 

关键字：虚拟行渲染，transform数据移动，列表节点渲染优化

 

NK0 - Background

 

本文的前提条件是前端已经缓存了上万条数据，当渲染数据到UI上时，如何让用户在使用过程中不会遭到卡顿，用起来不流畅？

 

之前很多项目由于数据大体围绕在上千左右，当结果集结合其它功能，例如Filter数据过滤功能一起使用的话，会采用以下几种方式去优化列表渲染，

 

（1）Version1: 采用display:none(对应Vue的指令是v-show)，再结合v-for中的Key来复用DOM元素和隐藏元素 =》该方式会导致UI Reflow即回流，所以UI会经常出现短暂的卡顿，用户体验不是很好

 

（2）Version2: 采用window对象的内置API，即window.requestAnimation()，来渲染成千上万条数据，即模拟动画效果让用户操作起来特别的顺畅。

 

以上两种方式都有个特点：DOM中会插入数据量大小的元素，尽管有些数据被隐藏起来，但都会导致HTML文件size会非常大，低端设备的速度会明显变慢。

 

所以基于以上两种方式，还不能够满足去渲染上万条数据！

 

也因此trigger出本文的主题 - 基于VUE列表的虚拟滚动

 

本文的虚拟滚动方式主要围绕着

 

（1）虚拟行渲染：缓存数据和筛选数据，除了要保留用户的可视区域的数据，还考虑到了如果用户的滚动范围不是很大的话，就不需要去刷新页面，所以DOM中的元素除了可视区域的数据，会多保留视图的上下留闲数据。

 

（2）布局：主要是为了假装所有数据元素都有在占用空间，浏览过React virtualized库，发现它在复用已有DOM元素的基础上，通过css的绝对定位position:absolute + top:偏移量，来移动数据，但是这样滚动元素的时候会引起浏览器回流，会增加更多的渲染开销，所以我这边会采用另一种方式，即transform:translateY(偏移量)来优化数据移动，因为该CSS3元素不会引起Reflow和Repaint。

 

（3）DOM复用：使DOM节点的数量保持在较低的水平，因为DOM节点如果太大而无法管理，低端设备的速度会明显变慢，所以我们能做的是复用已有的DOM节点和减少每个节点的布局、样式和绘制方面的开销成本。而VUE提供了数组全新赋值和变异方法来复用DOM和减少DOM操作，但是数组全新赋值的开销成本比数组变异开销更大，所以针对用户的滚动速度来优化列表渲染。

 

NK1 - 虚拟滚动（Virtual Scrolling）

 

TL;DR: 复用DOM元素，隐藏不在视图内的其它元素，使用占位符来延迟刷新数据。

 

下面是当我们用虚拟滚动方式来处理上万条数据在UI的呈现效果，

 

从上面的结果发现，当用鼠标滚动的时候，

 

（1）尽管数据量是上万条，但是HTML标签元素永远就那么几个

 

（2）有些HTML元素会被更新，而有些HTML元素不会变化

 

虚拟滚动能够很好优化上万条数据的呈现跟的上用户滚动操作的速度，犹如动画般的交互顺滑。

 

接下来会分享下虚拟滚动的设计实现，

 

NK2 Virtual scrolling - Props Design(属性设计)

 

（1）viewport：这里看成是Table数据的可视区域，需要提供可视区域的高度，用于计算实际渲染在DOM中Item的数量。

 

（2）size：每条数据在DOM中占用的高度，用于统计虚拟列表的高度，默认每行的高度为40px。

 

（3）Render Items：真正曾现在用户视觉上的items。

 

（4）Remain Items：（向上/向下）可是区域之外的留闲数据高度，不显示在viewport中，但是存在DOM中，其用于当用户滚动的距离不是很大的时候，UI不需要重新去渲染，为滚动做了一层留长优化。

 

接下来讲一下虚拟滚动特征，

 

NK3 Virtual scrolling - Virtual Row Render(虚拟行渲染)

 

Virtual Row Render - 在已知viewport有高度情况下，我们可以先把每条数据看作是每一个独立的行数据，用索引来标记每条数据，用Map对象封装这些块数据，存在浏览器的内存中，当滚动事件被触发的时候，我们只需要渲染能够映射在viewport中对应的块数据，而不是遍历渲染所有块，能有效的减少HTML file size。

 

key = index，我们用数据索引和每条数据的高度来作为虚拟块Map的Key，结合滚动的距离和viewport的高度，来标记实际要渲染在DOM中的items，即

 

另外每个Item会根据Key值来定义其显示范围，如item1的key为0，则它的显示范围应该是[0——40)这个区间，而item2区间为[40,80)，以此类推……其目的是用于计算item的显示区间是否在滚动的范围内。