IntersectionObserver实现虚拟列表初探 http://zoo.zhengcaiyun.cn/blog/article/intersectionobserver
前言
前端开发中经常会遇到大数据量列表展示的性能问题，即大数据量一次性展示时前端渲染大量 Dom，触发渲染性能问题，造成初始加载白屏，交互卡顿等。解决这类问题的方案也有很多，使用虚拟列表展示是一个比较常见的解决方案。今天我们来介绍如何使用 IntersectionObserver 这个 API 来自定义实现虚拟列表。
传统列表
在未使用虚拟列表之前，传统列表很难处理大量数据的渲染问题，常出现以下情况：
- 列表数据渲染时间长甚至出现白屏
- 列表交互卡顿
为了解决该类问题，我们可以选用虚拟列表来承载大量数据的渲染，增强用户体验，IntersectionObserver API 作为浏览器原生的 API，可以做到“观察”所需元素是否需要在页面上显示，以此来对大量数据的渲染进行优化。
虚拟列表
在介绍 IntersectionObserver 之前，我们先简单介绍下虚拟列表概念。前面已经提到，页面的性能问题是由于太多数据渲染展示引起的。但一个页面总共就那么大，人一屏能浏览的内容就这么多，如果我们可以只渲染展示当前可见区域内的内容，当内容已出可见区域外时只作简单渲染，这样不就可以大大提高页面性能了吗？虚拟列表就是这个思路的实现
传统的实现方案
根据刚才的介绍我们知道，关键是要计算出哪些 dom 出现在可视区域需要实际渲染，哪些在视野外只需简单渲染。传统方法一般是监听 scroll, 在回调方案中 手动计算偏移量然后计算定位，由于 scroll 事件密集发生，计算量很大，容易造成性能问题。另外如果行行高不固定（实际业务中往往需要这样）, 那计算将会更加复杂。
自己观察不难发现，所有的这些计算都是为了判断一个 dom 是否在可视范围内，如果存在一个方法可以方便地让我们知道这点，那实现虚拟列表方案将大大简化。幸运的是目前大部分浏览器已经提供了这个api——IntersectionObserver
IntersectionObserver介绍
IntersectionObserver 接口 (从属于 Intersection Observer API) 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗 (viewport) 交叉状态的方法。祖先元素与视窗 (viewport) 被称为根 (root)。
当一个 IntersectionObserver 对象被创建时，其被配置为监听根中一段给定比例的可见区域。一旦 IntersectionObserver 被创建，则无法更改其配置，所以一个给定的观察者对象只能用来监听可见区域的特定变化值；然而，你可以在同一个观察者对象中配置监听多个目标元素。
示例
代码语言：javascript复制var intersectionObserver = new IntersectionObserver(function(entries) {
// If intersectionRatio is 0, the target is out of view
// and we do not need to do anything.
if (entries[0].intersectionRatio <= 0) return;
loadItems(10);
console.log('Loaded new items');
});
// start observing
intersectionObserver.observe(document.querySelector('.scrollerFooter'));
可以看到用法很简单：
- 首先new IntersectionObserver 构造函数，这个函数接受两个参数：callback 是可见性变化时的回调函数，option 是配置对象（该参数可选）, 然后就得到一个观察器实例
- 调用实例的 observe 方法对目标 dom 元素进行监听
- 在回调函数 callback 中拿到 entries， entries是一个数组，里面每个成员都是一个IntersectionObserverEntry对象，监听了几个元素， entries 就包含了几个成员。IntersectionObserverEntry对象描述了目标对象与容器之前的相交信息。其中 intersectionRatio 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为 1，完全不可见时小于等于 0。在这里我们取 entries[0].intersectionRatio 来判断目标元素是否在视野中, 大于 0 代表在视野中，小于 0 表示已移出视野。
使用 IntersectionObserver 实现虚拟列表方案
基本思路
- 实例化配置一个观察器，在这里除了传入回调函数外我们还会传入配置项： config = { root: document.querySelector('.main'), } 这样我们就设置了 class 为 main 的 dom 元素为容器
- 监听列表的每一行元素
- 在回调函数中拿到每一个行元素的 intersectionRatio，一次判断是否在可是区域内。如果进入视野则给这一行附上实际的数据进行渲染，如果移出视野则将这一行的数据置为空。此外为了定位准确，我们在元素移出视野时给一个实际渲染时的高度。
简化示例代码如下：
代码语言：javascript复制 <div class="main">
<div v-for="(row, index0) in uiPeriodList" :key="index0">
<div class="period" :style="periodStyle">
<div
v-for="(column, index1) in row.columnList"
:key="column.id"
>
/* 详细展示元素 */
</div>
</div>
</div>
</div>
update() {
let rolwList = document.querySelectorAll('.period')
let _this = this
let config = {
root: document.querySelector('.main'),
}
let intersectionObserver = new IntersectionObserver(function(entries) {
entries.forEach((row)=> {
if (row.intersectionRatio <= 0) {
if (!_this.isFirst) {
row.target.style.height = `${row.target.clientHeight}px`
}
_this.uiPeriodList[index].coordList = []
} else {
row.target.className = 'period'
row.target.style.height = ''
_this.uiPeriodList[index].columnList = _this.periodList[index].columnList // 附上实际元素
}
})
}, config)
if (this.isFirst) {
rowList.forEach((row, index) => {
intersectionObserver.observe(row)
})
this.isFirst = false
}
}
没有效果
当按照上面实现后，实际测试却发现并没有达到预想效果，初始加载时仍然非常缓慢，出现长时间白屏。 这是为什么呢？打印发现，初始时每一行的元素都进入了视野中，触发了附上实际数据的动作从而引发渲染。 怀疑是初始加载元素时没有实际内容，导致大量的行元素没有高度而一下子直接进入了视野区，进而触发大数据量渲染。 为了解决这个问题，我们在初始时给行元素设置一个非常大的行高，使得在视野中只存在一行，然后对这一行附上实际数据，去除行高样式，使行的高度由实际内容决定。这样可以使各个行依次进入视野，逐个渲染直到实际的高度的行元素撑满视野
代码语言：javascript复制created() {
this.periodStyle = {
'grid-template-columns': `52px repeat(${this.headList.length}, 1fr)`,
height: '2000px',
}
}
let intersectionObserver = new IntersectionObserver(function(entries) {
entries.forEach((row)=>{
if (row.intersectionRatio <= 0) {
if (!_this.isFirst) {
row.target.style.height = `${row.target.clientHeight}px`
}
_this.uiPeriodList[index].coordList = []
} else {
row.target.style.height = ''
_this.uiPeriodList[index].columnList = _this.periodList[index].columnList // 附上实际元素
}
})
}, config)
再试一下，问题解决
快速下拉出现空白行
解决了上面的问题，我们的虚拟列表方案已基本实现，但还有瑕疵。当我们快速滚动列表时有可能出现空白区域，原因是监听回调是异步触发，不随着目标元素的滚动而触发，这样性能消耗很低，但也会导致回调函数没有执行，导致出现在视野中的元素但没有附上实际数据。
自然地我们想到增加冗余量来解决这个问题，在行元素还没出现在视野当中时就附上实际数据进行渲染。查看发现在初始化 IntersectionObserver 可以传入配置项 rootMargin, rootMargin 定义根元素的 margin，用来扩展或缩小 rootBounds 这个矩形的大小，从而影响 intersectionRect 交叉区域的大小。这样就变相地达成在视野单位外就进行数据实际渲染的目的
代码语言：javascript复制let config = {
root: document.querySelector('.main'),
rootMargin: '100px 0px',
}
再试，问题基本解决
方案对比
由下图我们能看到，目前主流浏览器新版本基本都支持了这个 API， 但老版本及 IE 不支持
传统的监听 scroll 方案性能消耗大，交汇计算复杂，但浏览器兼容性高。 而 IntersectionObserver 异步特性降低了提高了性能且实现简便，但相应的兼容性较差些。
结语
虚拟列表是解决大数据量列表渲染的有效方案。对于实际业务中对老版本浏览器兼容性要求不高的场景，大家可以考虑使用 IntersectionObserver，可以方便地实现自定义的虚拟列表。
参考资料
- MDN: IntersectionObserver(https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API)
- 阮一峰博客(https://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html)
