Angular2:如何触发变更检测?

时间:2015-09-27 10:01:57

标签: performance angular

我目前正在尝试调试我的应用程序性能。事实证明,由于使用了各种数量的管道,许多帧花费的时间超过200毫秒,并且大部分时间花在NumberFormat.format()上。 在开发人员工具时间表中,我发现更改检测的触发频率高于要求。

对于单个请求的单个XHR就绪状态更改,Lifecycle.tick()被调用11次。我预计只有在将最终结果分配给模板中使用的本地字段时才会发生这种情况。即使未修改模板绑定,在帧中每次记录11次运行NumberFormat.format()也会导致应用程序出现明显的延迟。

一旦XHR就绪状态发生变化,这是我的代码中使用的Promise链,在这种情况下是搜索请求:

  • 包裹请求的承诺解决了响应
  • 通过解析响应JSON
  • 构造数组
  • 对于数组中的每个项目,构造一个本地模型(ItemModel):
    • 对于对其他实体的每次引用,实体从缓存中获取,如果不存在,则从远程服务器获取;然后转换为本地模型实例。获取所有引用后,Promise将解析ItemModel实例。请注意,这可能会导致创建几个新的Promise,因为需要解析几个级别的引用。通常,实体位于缓存中,这些Promise直接解析。
  • 结果是一个ItemModel数组,分配给控制器中的一个字段。

这个序列运行得非常快。但是,如时间轴中所示,每次创建本地模型实例后都会调用Lifecycle.tick()。因此,如果需要解析10个引用来构建完整的本地模型树,Lifecycle.tick()将被调用10次。为什么呢?

在创建本地模型时,有时候会调用Zone.fork。为什么不总是为什么?

我很高兴听到有关触发区域和变化检测的更多信息,以便提高我的应用效果。

可以找到开发人员工具个人资料,时间轴和网络示例here(2015年10月11日到期) 可以找到应用程序代码here

1 个答案:

答案 0 :(得分:1)

我终于通过使用immutable-js中的immutables集合并将changeDetection策略更改为ChangeDetectionStrategy.OnPush来解决这个问题。

有关angular2中变化检测的信息: http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications

此博客包含其他有用的资源。