在刚刚结束的 Chrome dev summit 2018 上,谷歌工程经理 Gray Norton 向我们介绍 virtual-scroller,一个 Web 滚动组件,未来它可能会成为 Web 高层级 API(Layered API)的一部分。它的目标是解决长列表的性能问题,消除离屏渲染。该项目处于研发中,你可以在 GitHub 查看它的开发者预览版本。
众所周知,渲染性能主要取决于渲染量, 过多的 DOM 会使你的网站速度变得很慢,即使在本地,也会出现相同的问题,但若通过虚拟滚动的方式,也就是在用户滚动时用足够的内容填充屏幕并不断更新,就能让网站保持高速运行,这也是 virtual-scroller 的基本原理。
详解 virtual-scroller
<virtual-scroller>是未来 Web 平台的一个潜在特性,是 layered API 项目的一部分,用于将 JavaScript 对象集映射到 DOM 节点上,并且只渲染当前可见的 DOM 节点,其余部分为“虚拟”的。
<script type="module" src="std:virtual-scroller|https://some.cdn.com/virtual-scroller.js">
</script>
<virtual-scroller></virtual-scroller>
<script type="module">
const scroller = document.querySelector('virtual-scroller');
const myItems = new Array(200).fill('item');
scroller.updateElement = (child, item, index) => {
child.textContent = index + ' - ' + item;
child.onclick = () => console.log(`clicked item #${index}`);
};
// This will automatically cause a render of the visible children
// (i.e., those that fit on the screen).
scroller.itemSource = myItems;
</script>
默认情况下,这个示例中创建的虚拟滚动条内的元素为<div>,并将会被回收。更多示例请参阅:
https://github.com/valdrinkoshi/virtual-scroller/blob/master/demo/index.html
API 介绍
createElement 属性
类型:function(item: any, itemIndex: number) => Element
在设置这个属性时,使用工厂函数来配置虚拟滚动条,这个工厂函数会在指定索引位置的项目首次准备好在 DOM 中显示时创建一个元素。
在首次调用时,createElement将搜索第一个<template>元素,该元素本身在其模板内容中至少也包含了一个子元素。如果存在,它将通过克隆该子元素来创建新元素。否则,它将创建一个<div>元素。对于这两种情况,如果 recycleElement 为默认值,它将回收 DOM 节点。
如果 recycleElement 为默认值,那么更改这个属性的默认值将自动将 recycleElement 重置为 null。
updateElement 属性
类型:function(child: Element, item: any, itemIndex: number)
在设置这个属性时,使用一个函数来配置虚拟滚动条,这个函数将使用指定索引处的项目的数据来更新元素。
这个属性将在以下场景中被调用:
-
用户滚动滚动条,更改项目元素的可见性。在这种情况下,将为所有新的可见元素调用 updateElement。
-
开发人员修改了 itemSource 属性。
-
开发人员调用了 itemsChanged(),它将为所有当前可见的元素调用 updateElement。
默认的 updateElement 将子元素的 textContent
设置为给定项。几乎所有使用的地方都需要改变这个行为。
recycleElement 属性
类型:function(child: Element, item: any, itemIndex: number)
如果项目的元素不再可见,recycleElement 默认会将它回收,并将其与 DOM 连接,默认的 createElement 就可以重用它。
当项目元素不再可见时,将这个属性设置为 null 可以将它从 DOM 中删除,并防止被默认的 createElement 回收。
通常,这个属性会被自定义,以便引入自定义的节点回收逻辑。
itemSource 属性
类型:Array 或 ItemSource
设置这个属性可以控制滚动条如何将可见索引映射到对应项。然后,这些项被提供给各种自定义渲染函数:createElement、updateElement、recycleElement。
如果提供的是数组,它将被转换为 ItemSource 实例,这个实例将返回数组中的元素,就像在调用 ItemSource.fromArray(array) 一样(没有 key 参数)。
layout 属性
类型:string
值可以为:
-
vertical(默认)
-
horizontal
-
vertical-grid
-
horizontal-grid
也可以设置为元素的属性,例如<virtual-scroller layout=“horizontal-grid"></virtual-scroller>
itemsChanged() 方法
这将重新渲染所有当前显示的元素,使用 updateElement 来更新它们。
通常需要在要显示的数据发生变化时调用它,包括对数据的添加、删除和修改。
scrollToIndex 方法
要滚动到指定的索引,可选择使用以下位置之一:
-
“start”:将项目的开头与滚动条可见部分的开头对齐;
-
“center”:将项目的中心与滚动条可见部分的中心对齐;
-
“end”:将项目的末尾与滚动条可见部分的末尾对齐;
-
“nearest”:如果项目位于滚动条可见部分的中心之前,那么与“start”一样;如果它位于滚动条可见部分的中心之后,则与“end”一样。
“rangechange”事件
Bubbles: false / Cancelable: false / Composed: false
当滚动条完成渲染新的项目范围时触发,例如,用户滚动了滚动条。这个事件是 RangeChangeEvent 的一个实例,它具有以下属性:
-
first:一个数字,给出当前渲染的第一个项目的索引。
-
last:一个数字,给出当前渲染的最后一个项目的索引。
ItemSource 类
ItemSource 类代表了一种将索引转换为 JavaScript 值的方法。你可以像这样创建它们:
const source = new ItemSource({
item(index) { ... },
getLength() { ... },
key(index) { ... }
});
例如,要创建一个从 contacts 数组中获取项目的 ItemSource,并使用 contact.id作为键,你可以这样:
const contactsSource = new ItemSource({
item(index) { return contacts[index]; },
getLength() { return contacts.length; },
key(index) { return contacts[index].id; }
});
还有一个工厂方法 ItemSource.fromArray(array [,key]) 可以更容易地完成这个操作
const contactsSource = ItemSource.fromArray(contacts, c => c.id);
将一个项目传给 fromArray() 的参数 key,并且返回该对象的唯一键。如果没有指定参数 key,则将项目索引作为键。
ItemSource 类的主要用途是赋值给元素的 itemSource 属性,所以目前它唯一的公共 API 中只有一个 length 属性。