繁体   English   中英

Angular2:如何触发变更检测?

[英]Angular2: How are change detection triggered?

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

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

这是 XHR 就绪状态更改后在我的代码中使用的 Promise 链,在本例中为搜索请求:

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

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

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

我很高兴听到更多关于如何触发区域和更改检测以提高我的应用程序性能的信息。

可以在此处找到开发人员工具配置文件、时间线和网络示例(2015 年 10 月 11 日到期)可以在此处找到应用程序代码。

我终于通过使用不可改变的js immutables收藏和改变changeDetection战略,围绕这让ChangeDetectionStrategy.OnPush

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM