在刚刚结束的 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 类的主要用途是赋值给<virtual-scroller>元素的 itemSource 属性，所以目前它唯一的公共 API 中只有一个 length 属性。
参考链接：https://github.com/valdrinkoshi/virtual-scroller
网友评论