Angular 2 大型项目列表的性能优化

Question

假设我有一个显示项目列表的组件

export class ListComponent implements OnInit{

public list:any;

constructor(private _ls: ListService) {}

    ngOnInit() {
            this._ls.listLoad().subscribe((data) => {
                this.list = data['list'];
            });
    }

    loadMore() {
            this._ls.listLoad(this.page).subscribe((data) => {
                this.list = this.list.concat(data['list']);
                this.page++;
            });
    }

}

在模板中我们有

<ul>
    <li *ngFor="let item of list; let index=index">
    {{ item.name}}
    </li>
</ul>
<a (click)="loadMore()">Load more</a>

我想知道当我们点击“加载更多”link 并从服务器获取新项目并附加到列表时，Angular 2 是重绘完整列表还是仅附加DOM?

中的新项目

如果重新绘制完整列表，有没有办法仅附加新添加的项目。 ChangeDetectionStrategy.OnPush 在这种情况下会有帮助吗？

在我的示例中，我最初显示 20 个项目，每次单击“加载更多”都会在列表中追加 20 个项目。我希望当用户多次加载更多项目时，他们可能会在列表中列出 1000 到 2000 个项目。如果 Angular 在每次附加时重绘完整列表，可能会导致性能问题。

@ngrx/store 可以提供一些性能优势吗？

Answer 1

*ngFor 应该只添加新项目，同时保持现有项目不变。如果您在开头或中间插入新项目会导致项目被删除并重新添加而不是仅仅移动，则会出现一个已知问题。

Angular 2 大型项目列表的性能优化

Angular 2 Performance Optimization for Large List of items

angular

angular2-template

ngrx