Angular 性能

*ngFor 与 Ionic 组件

在将 *ngFor 与 Ionic 组件一起使用时，我们建议使用 Angular 的 trackBy 选项。这使得 Angular 能够以更高效的方式管理变更传播，仅更新组件内部的内容，而不是完全重新创建组件。

通过使用 trackBy，你可以为每个循环元素提供稳定的身份标识，以便 Angular 在迭代器中跟踪插入和删除操作。以下是使用 trackBy 的示例：

home.page.html

<ion-item *ngFor="let item of items; trackBy:trackItems">
  <ion-label>{{ item.value }}</ion-label>
</ion-item>

home.component.ts

items = [
  { id: 0, value: 'Item 0' },
  { id: 1, value: 'Item 1' },
  ...
]

trackItems(index: number, itemObject: any) {
  return itemObject.id;
}

在此示例中，我们有一个名为 items 的对象数组。每个对象包含一个 value 和一个 id。使用 trackBy，我们传递一个 trackItems 函数，该函数返回每个对象的 id。此 id 用于为每个循环元素提供稳定的身份标识。

有关 Angular 如何使用 ngFor 管理变更传播的更多信息，请参阅 Angular NgForOf 变更传播文档。

来自 Ionic 团队

How to Lazy Load in Ionic Angular

Improved Perceived Performance with Skeleton Screens

来自 Angular 团队

Build performant and progressive Angular apps - web.dev

来自社区

High Performance Animations in Ionic - Josh Morony

High Performance List Filtering in Ionic - Josh Morony

Increasing Performance with Efficient DOM Writes in Ionic - Josh Morony

Ionic Framework is Fast (But Your Code Might Not Be) - Josh Morony

备注

你有想要分享的指南吗？点击下面的 Edit this page 按钮。