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。为什么以及为什么不总是?
我很乐意听到更多关于如何触发区域和变化检测以提高我的应用程序性能的信息。
可以找到开发者工具配置文件、时间表和网络示例here(2015 年 10 月 11 日到期)
可以找到应用程序代码 here.
我终于通过使用 immutable-js 的不可变集合并将 changeDetection 策略更改为 ChangeDetectionStrategy.OnPush
.
解决了这个问题
有关 angular2 中变化检测的信息:
http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications
此博客包含其他有用的资源。
我目前正在尝试调试我的应用程序性能。事实证明,由于使用了各种数字管道,许多帧花费的时间超过 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。为什么以及为什么不总是?
我很乐意听到更多关于如何触发区域和变化检测以提高我的应用程序性能的信息。
可以找到开发者工具配置文件、时间表和网络示例here(2015 年 10 月 11 日到期) 可以找到应用程序代码 here.
我终于通过使用 immutable-js 的不可变集合并将 changeDetection 策略更改为 ChangeDetectionStrategy.OnPush
.
有关 angular2 中变化检测的信息: http://victorsavkin.com/post/114168430846/two-phases-of-angular-2-applications
此博客包含其他有用的资源。