Question

我在Angular 2版本：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';作为我的polyfills。

在我的Winforms时代，我会使用BeginUpdate（）EndUpdate（）来防止这类事情发生，但我不知道网络世界中有这样的事情。

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

Answer 1

嗯，没有办法特别知道为什么它在Edge中速度慢，但IE无论如何都是好的！

您可以采取的措施*ngFor是在trackBy内使用*ngFor功能。

这个例子做了一些不错的事情，也就是说，不再渲染整个列表，而是如果有什么变化，再次渲染该元素。

<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

Edge中的Angular 2动态选择选项较慢

1 个答案: