转自 nickkcik 大神
这次项目经验会谈谈经常在项目中,针对成千上万数据渲染优化的不断探索来谈谈自己的体会,其目的就是保证用户浏览上万条数据的时候,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元素,隐藏不在视图内的其它元素,使用占位符来延迟刷新数据。
下面是当我们用虚拟滚动方