JavaScript内核与高级编程之：`Angular`的`Change Detection`：`Zone.js`的工作原理与性能分析。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女们，大家好！我是今天的讲师，咱们今天就来聊聊Angular里那个神奇的Change Detection，顺带扒一扒幕后英雄Zone.js的底裤，看看它到底是怎么搞事情的，以及怎么让它更有效率地干活。

开场：Change Detection，你真的懂它吗？

先问大家一个问题，Angular怎么知道什么时候该更新界面？难道它一直傻傻地盯着你的数据，一旦有变化就立马刷新？如果是这样，那你的CPU早就爆炸了。

答案当然是：Angular有一套智能的机制，叫做Change Detection，它会负责检测数据的变化，并适时地更新DOM。

但是，Change Detection本身并不知道什么时间该去检查。你需要告诉它，或者说，它需要知道哪些事情可能会引起变化。这就是Zone.js出场的地方了。

第一幕：Zone.js，Angular的秘密武器

Zone.js是一个Execution Context，简单来说，它就像一个“观察者”，会监控你的代码执行过程，并记录下哪些地方可能会引起数据变化。它可以理解成一个“沙箱”，把你所有的异步操作都包裹起来。

想象一下，你家小区门口有个保安（Zone.js），他会记录下所有进出小区的人和车辆（异步操作），然后定期通知物业（Angular）：“喂，有人进出小区了，快看看有没有什么变化，要不要更新一下小区信息？”

// 一个简单的Zone.js例子
const zone = Zone.current.fork({
  name: 'MyZone',
  onInvokeTask: (parentZoneDelegate, currentZone, targetZone, task, applyThis, applyArgs) => {
    console.log('开始执行Task:', task.type, task.source);
    try {
      return parentZoneDelegate.invokeTask(targetZone, task, applyThis, applyArgs);
    } finally {
      console.log('Task执行完毕:', task.type, task.source);
    }
  },
  onHasTask: (parentZoneDelegate, currentZone, targetZone, hasTaskState) => {
    console.log('Task队列状态:', hasTaskState);
    parentZoneDelegate.hasTask(targetZone, hasTaskState);
  }
});

zone.run(() => {
  console.log('在MyZone中执行代码');
  setTimeout(() => {
    console.log('定时器回调执行');
  }, 1000);
});

// 输出结果 (大致):
// 在MyZone中执行代码
// Task队列状态: { microTask: false, macroTask: true, eventTask: false }
// 开始执行Task: macroTask setTimeout
// 定时器回调执行
// Task执行完毕: macroTask setTimeout
// Task队列状态: { microTask: false, macroTask: false, eventTask: false }

这段代码展示了Zone.js如何拦截setTimeout这个macroTask，并在其执行前后打印日志。 onHasTask 方法则能监控到Task队列的状态变化。

Zone.js 拦截的异步操作：

异步操作类型	拦截的API	备注
MacroTask	`setTimeout`, `setInterval`, `XMLHttpRequest`, `fetch`	宏任务，通常涉及I/O操作
MicroTask	`Promise.then`, `queueMicrotask`	微任务，在宏任务之后执行，优先级高于UI渲染
EventTask	DOM事件监听器 (`addEventListener`)	事件任务，例如点击事件，键盘事件等
XHR	`XMLHttpRequest`	`XMLHttpRequest` 请求

第二幕：Angular与Zone.js的爱情故事

Angular默认情况下依赖Zone.js来触发Change Detection。当Zone.js捕获到任何异步操作完成时，它会通知Angular：“嘿，有事情发生了，赶紧检查一下有没有数据变化！”

Angular收到通知后，就会执行Change Detection，遍历你的组件树，检查每个组件的数据是否发生了变化，并更新DOM。

// 模拟一个Angular组件
class MyComponent {
  name: string = 'Initial Name';

  constructor() {
    setTimeout(() => {
      this.name = 'Updated Name'; // 数据变化
      // Change Detection 会自动触发
    }, 1000);
  }
}

在这个例子中，setTimeout的回调函数会修改name属性，Zone.js会捕获到这个操作，并触发Change Detection，从而更新界面。

第三幕：Change Detection的策略

Angular提供了两种主要的Change Detection策略：

Default: 这是默认策略，Angular会检查组件树中的每一个组件，无论数据是否真的发生了变化。这种策略简单粗暴，但效率较低。
OnPush: 只有当输入属性（@Input）引用发生变化，或者组件触发了事件时，Angular才会检查组件。这种策略更加智能，可以显著提高性能。

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <p>Name: {{ name }}</p>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush // 使用OnPush策略
})
export class MyComponent {
  @Input() name: string;
}

// 使用OnPush的组件只有在name属性的引用改变时才会重新渲染。
// 例如:
// <app-my-component [name]="person.name"></app-my-component>
// 只有当 person.name 指向一个新的字符串对象时，该组件才会更新。

第四幕：性能优化：如何驯服Change Detection这匹野马

Change Detection虽然强大，但如果使用不当，也会成为性能瓶颈。下面是一些优化Change Detection的技巧：

使用OnPush策略: 这是最有效的优化方式之一。确保你的组件是“纯”的，即给定相同的输入，总是产生相同的输出。
使用trackBy: 当使用*ngFor循环渲染列表时，使用trackBy可以告诉Angular如何识别列表中的每个元素，避免不必要的DOM更新。

// 在组件中定义trackBy函数
trackByFn(index: number, item: any): any {
  return item.id; // 使用唯一的id作为trackBy的key
}

// 在模板中使用trackBy
<div *ngFor="let item of items; trackBy: trackByFn">
  {{ item.name }}
</div>

使用Immutable数据: 如果你的数据是不可变的，那么Angular可以更容易地检测到变化，因为只需要比较引用是否相同即可。
Detach和Reattach Change Detector: 在某些情况下，你可能需要手动控制Change Detection。你可以使用ChangeDetectorRef来detach和reattach组件的Change Detector。

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <p>Value: {{ value }}</p>
    <button (click)="updateValue()">Update Value</button>
  `
})
export class MyComponent {
  value: number = 0;

  constructor(private cdRef: ChangeDetectorRef) {
    // 初始时Detach Change Detector
    this.cdRef.detach();

    // 1秒后重新Attach，并进行一次手动的Change Detection
    setTimeout(() => {
      this.cdRef.reattach();
      this.cdRef.detectChanges();
    }, 1000);
  }

  updateValue() {
    this.value++;
    // 手动触发Change Detection
    this.cdRef.detectChanges();
  }
}

减少绑定表达式的复杂性: 避免在模板中使用过于复杂的表达式，这会降低Change Detection的效率。可以提前在组件类中计算好结果，然后在模板中直接使用。
使用NgZone.runOutsideAngular: 有些任务不需要触发Change Detection，例如一些第三方库的更新。可以使用NgZone.runOutsideAngular在Angular Zone之外执行这些任务。

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <p>Value: {{ value }}</p>
  `
})
export class MyComponent {
  value: number = 0;

  constructor(private ngZone: NgZone) {
    this.ngZone.runOutsideAngular(() => {
      // 在Angular Zone之外执行一些任务
      setInterval(() => {
        // 这里的value变化不会触发Change Detection
        this.value++;
        console.log('Value updated outside Angular Zone:', this.value);
      }, 1000);
    });
  }
}

第五幕：Zone.js的Alternative：信号（Signals）

Angular 16引入了信号（Signals），作为一种更细粒度、更高效的数据变化通知机制，它能够在某些场景下替代Zone.js。

与Zone.js的全局拦截不同，信号允许开发者精确地控制哪些数据变化需要触发更新。这种方式避免了不必要的Change Detection，提高了性能。

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <p>Name: {{ name() }}</p>
    <button (click)="updateName()">Update Name</button>
  `
})
export class MyComponent {
  name = signal('Initial Name');

  updateName() {
    this.name.set('Updated Name');
  }
}

在这个例子中，name是一个信号。当调用name.set()时，Angular只会更新使用了name()的组件，而不会触发全局的Change Detection。

信号的优势：

更细粒度的更新: 只有使用了信号的组件才会更新。
更好的性能: 避免了不必要的Change Detection。
更易于调试: 可以更容易地追踪数据的变化。

信号的局限性：

需要手动管理状态: 需要手动创建和管理信号。
学习曲线: 需要学习新的API和概念。
并非所有场景都适用： 信号更适合于细粒度的数据变化，对于某些复杂的场景，可能仍然需要Zone.js。

第六幕：性能分析工具

了解了原理，我们还需要一些工具来帮助我们分析和优化Change Detection的性能。

Angular DevTools: Chrome和Firefox的Angular DevTools 提供了Profiler面板，可以记录Change Detection的执行时间，并找出性能瓶颈。
why-did-you-render: 这个库可以帮助你找出哪些组件被不必要地重新渲染了。

总结：

Change Detection是Angular的核心机制之一，理解它的工作原理对于编写高性能的Angular应用至关重要。 Zone.js是Change Detection的幕后英雄，但也可以通过使用OnPush策略、trackBy、Immutable数据、信号等技术来优化Change Detection的性能。记住，性能优化是一个持续的过程，需要不断地学习和实践。

最后的建议：

不要盲目地优化，首先要测量，找出真正的性能瓶颈。然后，根据实际情况选择合适的优化策略。祝大家写出高性能的Angular应用！

今天的讲座就到这里，感谢大家的聆听！希望对大家有所帮助。如果有什么问题，欢迎随时提问。祝大家早日成为Angular高手！

发表回复 取消回复

发表回复取消回复