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

阅读数:1645 2018 年 11 月 16 日

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

收藏

评论

微博

发表评论

注册/登录 InfoQ 发表评论