在前端开发过程中，经常需要处理海量数据列表的展示问题。传统的列表渲染方式，一旦数据过多就会导致性能和用户体验问题。为了解决这个问题，本文将介绍一种常用的前端技术 —— 虚拟滚动列表（Virtual Scroll List），并重点介绍 angular-virtual-list 这个常用的 npm 包。通过学习本文，读者将能够掌握该包的基本使用方法，以及改进性能提高用户体验的技巧。
什么是虚拟滚动列表
虚拟滚动列表是一种优化海量数据列表渲染性能的方法。它的基本思想是：只渲染屏幕内可见的部分数据，当用户向上或向下滑动列表时，动态加载新的数据。这种技术有效减少了页面 DOM 元素的数量，从而优化了性能和用户体验。
虚拟滚动列表的实现需要借助前端框架或者相关库的支持，比如 Angular、React，或者使用开源的虚拟滚动列表库。本文将介绍其中的 Angular 组件 angular-virtual-list。
angular-virtual-list 基本使用
angular-virtual-list 是一个 Angular 组件，它是基于 Angular CDK 中的 CdkVirtualScrollViewport 和 CdkVirtualForOf 实现的。通过 npm install 命令安装该组件，并且在 Angular 项目中引入后，即可在应用中使用。下面通过一个简单的示例代码来演示该组件的使用：
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>代码中的 cdkVirtualFor 指令表示一个 ngFor 循环，它的元素被指定为了 cdkVirtualFor，其中的 * 表示将该指令应用于元素本身。在运行时，指令会监听组件的滚动，并根据滚动位置和屏幕大小，加载合适的子元素。另外，cdk-virtual-scroll-viewport 元素是所谓的列表容器元素。其中的 itemSize 属性指定了列表项的大小（单位为像素），以便组件确定每个列表项目的高度。
angular-virtual-list 进阶应用
虚拟滚动列表的性能问题可能会随着列表项的特殊需求、数据源变化、组件样式上的改变而发生变化。为了更好地解决这些问题，我们可以使用一些更进阶的配置和优化方法，下面列举了一些：
- 可变项的高度
在 cdk-virtual-scroll-viewport 元素中使用 itemSize 属性是最常见的做法，它适用于所有列表项都含有相同的高度，但是对于那些高度可变的列表项，我们就需要使用 cdkVirtualForTrackBy 指令，来给每个表项提供一个独立的 key。这样组件就能正确地显示可变项的高度：
-- -------------------- ---- -------
---------------------------- ------------------------
------------------------
--------------------------
--------------------------
---------------------------------
---------------
---- ------------------- ---- -- ------ - ------ -------- -------- ---------------------
-------------------------
-------------
------------------------------------------------- --------
----------------------------
------
------------------------------在这段代码中，我们使用 trackBy 方法来计算每个列表项的 key 值，以便在后续的性能优化过程中更好地操作。同时，itemSizeAverager 帮助我们计算每个列表项的高度均值和方差。maxBufferPx 和 minBufferPx 属性分别指定了列表上、下两端缓存区所占的像素值，这样无需每次滚动前都重新计算每条项的实际高度，从而提升了性能。
- 异步数据加载
在列表之后添加新数据时，我们可以配置组件以延迟加载新项目以提高性能。我们可以使用 Observables 将新数据流注入 into items$ 中：
<cdk-virtual-scroll-viewport ...>
<div *cdkVirtualFor="let item of items$ | async" class="example-item">
{{item}}
</div>
</cdk-virtual-scroll-viewport>-- -------------------- ---- -------
------ ----- ----- -
------ - ----------------
----------- ----------------- -
----- ----- - ------ ---- ------- ----- ---- -----
------ -----------
----------------- -- -
-- ---- --- ---- --------- ------ -- ---- ------ --------- --- ----- -- --- -----
------ ----------------------------------- -- ---- --- ----- ---- ------
---
---------- ----- -- -------- ---------
--
-
-这一技巧可以减轻初始加载时的网络负担，为改进性能提供了更多的思路。
总结
虚拟滚动列表是一种在海量数据列表中处理性能的有效方法。使用 angular-virtual-list 这个 npm 包能够让我们很容易地在 Angular 应用中集成虚拟滚动列表的功能，包含基本使用和进阶应用两个方面的内容。在实际开发中，我们还可以结合具体应用场景，使用更多的组件属性和配置，从而达到优化性能提高用户体验的目的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fec81e8991b448ddad8