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

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