Angular 大列表性能优化

引言

今天看到一篇文章，有关在Angular应用程序中，如何优化大列表的方法。当数据列表变得很大时，很多Web应用程序都会出现性能问题，作者认为这通常不是框架本身的问题，即框架是框架，代码不是好代码。很多呈现数据的代码没有很好地斟酌，导致了性能问题。下面来看具体的优化方案。

方法一：使用虚拟滚动条（Virtual Scrolling）

虚拟滚动条是Angular CDK实现的一个组件，它可以用来比较高效地呈现数据量大的列表。虚拟滚动的原理是，将列表的容器的高度设置为所有将要呈现数据项的总高度，但是只呈现在当前视图内的一部分数据。我们从这里的例子可以看到，随着滚动条滚动，列表容器中呈现的列表项在不断变化，但是右侧的滚动条并不改变，只是改变了当前容器视图中的项目，并不是真的滚动。

<cdk-virtual-scroll-viewport itemSize="10000">       
 <div *cdkVirtualFor="let item of items">
   {
  { item }}
 </div>
</cdk-virtual-scroll-viewport>

当然，虚拟滚动也有一些缺陷。比如，被隐藏的列表项并没有呈现，因此是不可搜索的，因为这里的“不可见”是指项目元素根本不在页面上，而不仅仅是CSS样式上的不可见。另一个缺陷是，这个虚拟滚动条的实现十分依赖于你项目的特定实现，你的组件实现如果很复杂，可能虚拟滚动条就不能正常工作了。另外，引入这个Angular CDK库，也会增加项目代码包的大小。

方法二：手动呈现

所谓“自动”呈现，是指用Angular提供的原生Directive *ngFor 来实现，而“手动”方式，则是直接调用Angular的API去呈现。比如用ngFor的实现如下：