virtual-scroller

virtual-scroller 介绍

virtual-scroller，一个 Web 滚动组件，未来它可能会成为 Web 高层级 API（layered API）的一部分。它的目标是解决长列表的性能问题，消除离屏渲染。

渲染性能主要取决于渲染量， 过多的 DOM 会使你的网站速度变得很慢，即使在本地，也会出现相同的问题，但若通过虚拟滚动的方式，也就是在用户滚动时用足够的内容填充屏幕并不断更新，就能让网站保持高速运行，这也是 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>

网站地址:https://valdrinkoshi.github.io/virtual-scroller/

GitHub:https://github.com/valdrinkoshi/virtual-scroller

网站描述:一个 Web 滚动组件

virtual-scroller

官方网站：https://valdrinkoshi.github.io/virtual-scroller/