Angular变更检测机制以及对应性能优化

📚 阅读目录

• 🤔 什么是变更检测(Change Detection)？
  • 变更检测的概念
  • 变更检测的触发时机
• 🤔 Angular的变更检测如何工作的？
  • 变更检测的执行顺序
  • 变更检测的执行策略
• 🤔 对于Angular的变更检测如何优化？
  • 如何减少检测次数
  • 插件：Angular devtool使用介绍

✏️ 正文

什么是变更检测(Change Detection)？

变更检测的概念

组件内的数据状态变化以后，需要对应更新视图。这种将视图和数据同步的机制，就叫变化检测。

变更检测的触发时机

只要发生了异步操作(Events, Timer, XHR)，Angular 就会认为有状态可能发生变化了，然后就会进行变更检测。

• Events:：click，mouseover，mouseout，keyup，keydown 等浏览器事件；
• Timer：setTimeout/setInterval；
• XHR：各类请求等。

既然都是对异步操作进行变更检测，那么Angular是如何订阅异步请求，进行变更检测的呢？

这里介绍下NgZone以及它的fork对象Zone.js。

Zone.js 用于封装和拦截浏览器中的异步活动、它还提供 异步生命周期的钩子 和 统一的异步错误处理机制。

Zone.js 是通过 Monkey Patching（猴子补丁） 的方式来对浏览器中的常见方法和元素进行拦截，例如 setTimeout 和 HTMLElement.prototype.onclick。Angular 在启动时会利用 Zone.js 修补几个低级浏览器 API，从而实现异步事件的捕获，并在捕获时间后调用变更检测。

Angular通过forkZone.js并拓展出一个自己的区域NgZone，让应用中的所有异步操作都会运行在这个区域中。

Angular的变更检测如何工作的？

Angualr会为每一个