介绍
虚拟滚动是一种优化长列表的技术，通过只渲染可见范围内的部分，来提高页面性能。在 Angular 中，我们可以使用 Angular CDK 中的 cdk-virtual-scroll-viewport 组件来实现虚拟滚动。
使用
首先，我们需要引入 ScrollingModule：
-- -------------------- ---- -------
------ - --------------- - ---- -------------------------
-----------
-------- -
-- ---
---------------
--
-- ---
--
------ ----- --------- - -然后，我们需要使用 cdk-virtual-scroll-viewport 组件来代替常规的滚动容器，如 div 或 ion-content：
<cdk-virtual-scroll-viewport itemSize="50">
<div *cdkVirtualFor="let item of items" class="item">{{item}}</div>
</cdk-virtual-scroll-viewport>其中，itemSize 属性表示每个项的高度（或宽度，取决于滚动方向），cdkVirtualFor 指令与 *ngFor 类似，用于循环渲染每个项。
示例
下面是一个示例，展示了如何使用虚拟滚动来优化一个包含 10000 个项目的列表：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------------------------
--------- -
----------- ------ ------------
---- ------------------
---------------------------- --------------
----
------------------- ---- -- ------
------------
------------ ---------------- ---------- --
-
-------- ------- ---------
-------- --------- ---------
------
------------------------------
------
--
------- -
-
---------- -
------- ------
--------- -----
-
----- -
------ -----
------- -----
-------- -----
------------ -------
---------------- --------------
-------- - -----
----------- -----------
---------- -----
------------ -----
------ ------
-
--
--
--
------ ----- ----------------------------- -
------ ----- - ---
------------- -
--- ---- - - -- - - ------ ---- -
----- - - ------------------------ - -----
----- - - ------------------------ - -----
----- - - ------------------------ - -----
-----------------
--- --
----- ----- ------
------ ---------- ----- -------
---
-
-
-性能提升
通过使用虚拟滚动，我们可以大大减少 DOM 元素的数量，从而提高页面性能。在上述示例中，当我们滚动到列表的底部时，实际上只有一屏的元素被渲染出来，而其余的 99% 的元素并没有被渲染。
注意事项
cdk-virtual-scroll-viewport必须具有height或max-height属性- 如果
cdk-virtual-scroll-viewport的内容高度超过其容器高度，则需要确保其父元素具有正确的样式来支持滚动 - 虚拟滚动只适用于静态列表，即不支持动态添加或删除元素
结论
虚拟滚动是一种优化长列表的常用技术，在 Angular 中可以轻松实现。使用虚拟滚动可以大幅度减少 DOM 元素数量，从而提高页面性能和响应速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f629c7c5c563ced5802f22