通过实现虚拟滚动，提高大型列表的响应速度。
滚动列表是当今最常见的界面模式之一，无论是浏览您喜爱的社交媒体网站上无限滚动的 Feed，还是浏览企业信息中心，都会用到滚动列表。当滚动列表变得非常长（数百、数千或数十万项）时，应用性能可能会受到影响。
大型列表的加载速度可能会很慢，因为应用必须预先加载和渲染所有数据。此外，由于列表中的每个项都可能包含多媒体数据、媒体和功能，因此呈现和导航速度也可能较慢。
用户在加载或滚动页面时可能会遇到问题，从而导致用户感到沮丧并放弃页面。
使用组件开发套件在 Angular 中实现虚拟滚动
虚拟滚动是解决这些规模问题的主要技术。 虚拟滚动通过提供大小合适的滚动条以及在列表中导航的功能，让用户感觉列表非常大，而无需应用将整个列表保存在内存中或在页面上呈现。
在 Angular 中，虚拟滚动由组件开发套件 (CDK) 提供。通过修改遍历列表的方式，并提供一些额外的配置参数，CDK 的虚拟滚动功能将自动管理列表的虚拟渲染，从而提高网页性能和响应速度。
系统不会一次性渲染整个列表，而只会渲染屏幕上可容纳的一部分内容（外加一小部分缓冲区）。当用户浏览时，系统会计算并呈现新的项子集，并根据需要重复使用现有 DOM。
本文的其余部分将介绍如何设置基本的虚拟滚动。 您可以在此示例应用中查看完整的有效示例：
设置虚拟滚动
首先，请确保您已使用首选软件包管理器安装 @angular/cdk。如需使用 npm 安装，请在终端中运行以下命令：
npm install --save @angular/cdk
将 ScrollingModule 添加到您的应用
安装 CDK 后，从 @angular/cdk/scrolling 软件包中导入 ScrollingModule，它会处理虚拟滚动。然后，将其添加到模块的 imports 数组中：
import {ScrollingModule} from '@angular/cdk/scrolling';
...
imports: [
ScrollingModule
...
]
...
创建视口
如需了解该软件包的工作原理，请尝试创建一个包含 0 到 99,999 之间的数字列表的组件：
@Component({
template: `<div *ngFor="let item of list">{{item}}</div>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
当浏览器渲染应用时，它必须渲染 100,000 个单独的 <div> 元素。这对于基本文本节点可能没问题，但重复模板中的任何复杂性都无法很好地扩缩，并且任何事件监听器都会显著增加。
如需添加虚拟滚动并避免这些问题，您需要通过将列表封装在 <cdk-virtual-scroll-viewport> 元素中来创建视口：
@Component({
template: `<cdk-virtual-scroll-viewport>
<div *ngFor="let item of list">{{item}}</div>
</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
由于 ScrollingModule 会动态呈现列表的子集，因此您必须使用标准 CSS 指定视口的高度。您还需要通过指定 itemSize 为视口提供有关其内容的提示。该模块会使用这些信息来确定在给定时间要在 DOM 中保留多少项，以及如何呈现适当大小的滚动条。
@Component({
template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
<div *ngFor="let item of list">{{item}}</div>
</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
最后，将 *ngFor 转换为 *cdkVirtualFor：
@Component({
template: `<cdk-virtual-scroll-viewport itemSize="18" style="height:80vh">
<div *cdkVirtualFor="let item of list">{{item}}</div>
</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
list = Array.from({length: 100000}).map((_, i) => i);
}
视口不会遍历整个列表，而是会动态识别并遍历列表中的正确子集，以便用户查看。 现在，当用户加载页面时，CDK 应呈现适合屏幕的列表子集（加上一点缓冲区），并且视口中的任何滚动事件都会加载并呈现列表的相应子集：
更进一步
CDK 的虚拟滚动功能远不止这个基本示例。在示例应用中，整个列表都在内存中，但对于更复杂的应用，可以按需提取列表。如需详细了解 ScrollingModule 的其他功能和 cdkVirtualOf 指令，请参阅 CDK 文档中的 Scrolling。