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>

我想知道，当我们点击“加载更多”链接并从服务器获取新项目并将其附加到列表中时，Angular 2是否重绘完整列表或只是在DOM中附加新项目？

如果重新绘制完整列表，是否可以只添加新添加的项目。在这种情况下，ChangeDetectionStrategy.OnPush可以提供帮助吗？

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

@ ngrx / store可以带来一些性能上的好处吗？

Answer 1

echo 'Full time = '.round(1000*(getMicroTime()-$startMicroTime),2).' ms<br>'; echo 'User time = '.round(1000*(getUserTime()-$startUserTime),2).' ms<br>';只应附加新项目，同时保持现有的不变。如果您在开头或中间插入新项目会导致项目被删除并重新添加而不是仅仅移动，则会出现一个已知问题。

针对大型项目列表的角度2性能优化

1 个答案: