在刚刚结束的 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

virtual-scroller demo

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

创作场景

Web 长列表的救星？谷歌推出 Virtual Scroller