Edge中的Angular 2动态选择选项很慢答案

【问题标题】：Angular 2 dynamic select options slow in EdgeEdge中的Angular 2动态选择选项很慢
【发布时间】：2017-04-14 05:28:44
【问题描述】：

我在 Angular 2 Version: 4.0.1 中使用 *ngFor 来使用以下代码填写页面上的 5 个选择列表：

select [(ngModel)]="_materialInput.code" (change)="onChange()" formControlName="code" class="form-control" id="code">
    <option *ngFor="let x of _materialValues.code" value="{{x.key}}">{{x.value}}</option>
</select>

每次选择一个选项都会导致选择列表选项从服务器刷新。这种刷新在其他浏览器中很快。

我发现UI Responsiveness Chart 显示当此更新发生时，Edge 会一一删除这些 DOM 元素并更新样式，然后一一添加新选项。这需要很长时间。

我正在使用 import 'core-js/es6'; 作为我的 polyfill。

在我使用 Winforms 的日子里，我会使用 BeginUpdate() EndUpdate() 来防止这种事情发生，但我不知道网络世界中有这样的事情。

有人知道如何提高 Edge 的性能吗？

【问题讨论】：

请注意，您的帖子中实际上没有问题：P

标签： performance angular selectlist ngfor

【解决方案1】：

好吧，没有办法特别知道为什么它在 Edge 中很慢，但是 IE 到底有什么用处！

加速*ngFor 的方法是在*ngFor 中使用trackBy 函数。

这个例子做了一件好事，那就是，不要再次渲染整个列表，而是如果发生变化，再次渲染该元素。

<select [(ngModel)]="_materialInput.code" (change)="onChange()" formControlName="code" class="form-control" id="code">
    <option *ngFor="let x of _materialValues.code; trackBy: trackByFn" value="{{x.key}}">{{x.value}}</option>
</select>

组件

  trackByFn(index, item) {
    return index; // or item.id
  }

请参阅伟大的 Netanel Basal 的详细解释：

https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

【讨论】：