首页 文章

Angular 5应用程序缓慢

提问于
浏览 次
2

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

  • dragEnter . 检查拖动的物体是否可以放在那里（它有绿色边框）或不放（我们将边框改为红色）

  • dragLeave . 在对象离开时清除单元状态

  • dragDrop . DB的东西吗？

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

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

例如，要以此形式键入“Sample”：

The form

应用程序静止了大约10秒钟，然后输入单词中的所有字母 . 为了提高应用程序性能，所有单元组件都使用OnPush更改检测策略 . 我尝试使用Google开发人员工具来分析应用程序，这是在输入字段中编写“Sample”的结果：

Chrome profiler output

我认为它会给我一些糟糕表现的线索，但是，根据结果，我无法弄清楚原因 .

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

我感谢任何建议，谢谢！

angular profiling

1 回答

  • 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
  }); 
}
    回复于

相关问题