Оптимизация производительности приложений Angular с помощью обнаружения изменений

Понимание процесса обновления DOM в ответ на изменения состояния приложения в Angular

При создании приложения на Angular одним из наиболее важных аспектов является то, как Angular обновляет DOM в зависимости от изменений состояния приложения. Этот процесс называется Change Detection (CD). По сути, CD — это механизм, который проверяет, изменилось ли состояние приложения, и если да, обновляет ли DOM соответствующим образом.

Как работает Change Detection

Angular периодически запускает цикл CD, чтобы гарантировать, что любые изменения в модели данных отражаются в представлении. Этот цикл может быть запущен вручную или через асинхронные события, такие как взаимодействия с пользователем или завершение XMLHttpRequest.

Вот упрощённый обзор процесса CD:

По умолчанию Angular использует стратегию ChangeDetectionStrategy.Default, которая проверяет каждый компонент в дереве компонентов сверху вниз на наличие изменений. Хотя этот подход хорошо оптимизирован, он может вызвать проблемы с производительностью, если приложение слишком часто запускает CD.

Чтобы оптимизировать производительность приложения Angular, необходимо понимать и использовать различные стратегии и методы управления CD.

Использование ChangeDetectionStrategy.OnPush

Одной из самых эффективных стратегий оптимизации CD является использование стратегии ChangeDetectionStrategy.OnPush. Эта стратегия запускает CD только тогда, когда входные данные компонента изменяются или когда наблюдаемый объект внутри компонента выдаёт новое значение.

Например, вы можете реализовать OnPush в компоненте следующим образом:

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

@Component({
  selector: 'app-example',
  template: '<p>Example Component</p>',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
  // Компонентная логика здесь
}

С помощью OnPush Angular сравнивает предыдущие и текущие входные данные по ссылке. Если входные данные изменились, Angular помечает их как изменённые и обновляет компонент. Этот подход особенно эффективен при использовании неизменяемых структур данных.

Ещё один метод оптимизации CD заключается в том, чтобы отсоединить детектор изменений для конкретного компонента. Это может быть полезно, когда пользовательские взаимодействия или внешние службы запускают цикл CD чаще, чем необходимо.

Пример того, как можно отсоединить и снова присоединить детектор изменений:

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

@Component({
  selector: 'app-example',
  template: '<p>Example Component</p>'
})
export class ExampleComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  detachChangeDetection() {
    this.cdr.detach();
  }

  reattachChangeDetection() {
    this.cdr.reattach();
    this.cdr.detectChanges();
  }
}

Избегание загрязнения зоны

Загрязнение зоны происходит, когда асинхронные события, которые не влияют на состояние приложения, запускают цикл CD. Чтобы избежать этого, можно использовать метод runOutsideAngular для выполнения кода вне зоны Angular.

Пример:

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

@Component({
  selector: 'app-example',
  template: '<p>Example Component</p>'
})
export class ExampleComponent {
  constructor(private ngZone: NgZone) {}

  someAsyncOperation() {
    this.ngZone.runOutsideAngular(() => {
      // Код, который должен выполняться вне зоны Angular
    });
  }
}

Оптимизация выражений шаблона

Выражения шаблона должны быть быстрыми и эффективными. Следует избегать вызова функций в шаблонах, особенно если эти функции являются вычислительно затратными. Вместо этого используйте каналы или запоминайте результаты этих функций.

Пример использования канала для оптимизации выражения шаблона:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'examplePipe'
})
export class ExamplePipe implements PipeTransform {
  transform(value: any): any {
    // Вычисление здесь
    return value;
  }
}

// В шаблоне вашего компонента
<div>{{ someValue | examplePipe }}</div>

Использование trackBy с *ngFor Когда используется *ngFor для перебора списка, Angular может оптимизировать процесс рендеринга, используя функцию trackBy. Эта функция возвращает уникальный идентификатор для каждого элемента в списке, позволяя Angular идентифицировать и обновлять только те элементы, которые изменились.

Пример:

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

@Component({
  selector: 'app-example',
  template: `
    <div *ngFor="let item of items; trackBy: trackItemById">
      {{ item.name }}
    </div>
  `
})
export class ExampleComponent {
  items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    // Больше элементов здесь
  ];

  trackItemById(index: number, item: any): number {
    return item.id;
  }
}