Angular 角度5应用程序慢度

我正在尝试分析Angular 5应用程序，以找出其在加载某些对象时性能不佳的原因。我将对此进行更好的解释：应用程序加载一个网格，其中每个单元格都是对象的容器。用户可以将对象从侧边栏上的树拖动到网格中，因此每个单元格都会侦听3个事件（它们的名称来自我们使用的UI库）：

• 德拉根特。要检查拖动的对象是否可以放置在那里（它将有一个绿色边框）或不可以（我们将其边框更改为红色）
• 德拉格里夫。在对象离开时清除单元状态的步骤
• 拖拽。做数据库的东西

此外，要执行一些其他操作，例如通过所有单元格查找对象，当用户选择对象（用于剪切/粘贴操作）、我们要查找对象以及用户加载另一个数据网格时，每个单元格都有3个订阅需要注意

平均对象网格大约有100个单元。Angular处理所有这些事件和订阅是否太多？我有一个60个单元格的网格，试图在表格上键入任何东西都需要花费很长时间

例如，要在此表单中键入“示例”：

该应用程序静止了近10秒钟，然后输入单词中的所有字母。为了提高应用程序的性能，所有单元组件都使用OnPush更改检测策略。我曾尝试使用Google developer工具评测应用程序，以下是在输入字段中编写“示例”的结果：

我原以为这会给我一些表现不佳的线索，但根据结果，我无法找出原因

是否有更精确的工具来检查应用程序正在做什么来分析它

---

谢谢你的建议，谢谢

问题是来自UILibrary的事件没有在

ngZone

内运行，这导致无法触发更改检测。您应该在使用库的组件中插入

ngZone

，然后调用

run

函数：

constructor(readonly ngZone: NgZone) {}

onDragEnter(event: Event): void {
  this.ngZone.run(() => {
   // do here what ever you need to be changed
  }); 
}

---

您是否在模板中使用*ngFor构建UI？如果是这样，您是否在使用

trackBy

以获得更好的性能？您好！我使用2*ngFor循环：一个用于网格的每一行，另一个用于网格的每一个单元格。我在行和单元格上都使用了OnPush更改策略，您认为使用trackBy会有助于提高性能吗？不管怎样，我会在这两个组件上都尝试，然后发布结果。谢谢您好，我已经添加了您在上面建议的代码，它改进了近2秒（现在需要7030毫秒），但仍然太多了。无论如何，我会向UI开发人员发表评论，以确保他们考虑到这一点。谢谢