Angular 5应用程序缓慢

Question

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

• dragEnter事件。检查拖动的物体是否可以放在那里（它有绿色边框）或不是（我们将其边框改为红色）
• dragLeave。在对象离开时清理单元状态
• 的DragDrop。 DB的东西。

此外，要做一些其他操作，比如通过所有单元格查找对象，每个操作都有3个订阅，当用户选择对象时（用于剪切/粘贴操作），当我们想要查找对象时当用户加载另一个数据网格时。

平均对象网格有大约100个单元格。 Angular处理所有这些事件和订阅是否太过分了？我有一个有60个单元格的网格，试图在表格上输入任何形状需要永恒。

例如，要键入＆＃39; Sample＆＃39;以这种形式：

应用程序静止了近10秒钟，然后输入了单词中的所有字母。为了提高应用程序性能，所有单元组件都使用OnPush更改检测策略。我尝试使用Google开发人员工具对应用程序进行分析，这是编写＆＃39; Sample＆＃39;在输入字段中：

我认为这会给我一些表现不佳的线索，但根据结果，我无法弄清楚原因。

是否有更精确的工具可以检查应用程序正在对其进行分析？

我感谢任何建议，谢谢！

Answer 1

问题是来自您的UILibrary的事件未在ngZone内运行，这导致不会触发更改检测。您应该在组件中注入ngZone，然后调用run函数：

constructor(readonly ngZone: NgZone) {}

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