面试题：Angular性能优化策略与实践

Angular应用性能问题及优化策略

内存泄漏问题
- 问题描述：
  - 当组件被销毁时，如果仍然存在对该组件的引用，就可能导致内存泄漏。例如，在组件中订阅了一些Observable，而在组件销毁时没有取消订阅，那么这些订阅会一直存在，占用内存。此外，在使用第三方库时，如果没有正确管理库中的资源，也可能引发内存泄漏。
- 优化策略：
  - 手动取消订阅：在组件的ngOnDestroy生命周期钩子函数中，手动取消所有的Observable订阅。例如：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, Subscription } from 'rxjs';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit, OnDestroy {
  private subscription: Subscription;
  constructor() {}

  ngOnInit() {
    const observable = new Observable(observer => {
      // 模拟数据发送
      observer.next('Hello');
    });
    this.subscription = observable.subscribe(data => console.log(data));
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

  - **使用`takeUntil`操作符**：可以创建一个`Subject`，在组件销毁时，`next`一个值，然后在所有订阅的Observable管道中使用`takeUntil`操作符，这样当`Subject`发出值时，订阅就会自动取消。例如：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
  constructor() {}

  ngOnInit() {
    const observable = new Observable(observer => {
      // 模拟数据发送
      observer.next('Hello');
    });
    observable.pipe(takeUntil(this.destroy$)).subscribe(data => console.log(data));
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

渲染性能瓶颈问题
- 问题描述：
  - 脏检查机制触发频繁：Angular默认使用的是基于脏检查的变更检测机制。当应用中有大量数据变化时，每次变更检测都会遍历整个组件树，检查每个组件的状态是否发生变化，这会导致性能问题。例如，在一个包含大量列表项的组件中，频繁更新其中一项的数据，会触发整个列表所在组件及其父组件的变更检测。
  - 不必要的视图重新渲染：即使组件的数据没有发生实际变化，由于变更检测机制的误判，也可能导致视图的不必要重新渲染。这可能是因为组件中的某些引用类型数据虽然值未变，但引用地址发生了变化，使得变更检测认为数据有变化，从而重新渲染视图。
- 优化策略：
  - 使用OnPush策略：对于那些输入属性很少变化，并且不依赖于外部事件（如用户输入、定时器等）的组件，可以将其变更检测策略设置为OnPush。这样，只有当组件的输入属性引用发生变化，或者组件内部触发了事件（如点击事件）时，才会触发该组件的变更检测。例如：

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

@Component({
  selector: 'app-on-push',
  templateUrl: './on - push.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class OnPushComponent {}

  - **不可变数据模式**：通过使用不可变数据结构，可以减少不必要的视图重新渲染。当数据发生变化时，创建一个新的数据对象，而不是直接修改原对象。这样，变更检测机制可以通过简单的引用比较来判断数据是否真正发生了变化。例如，使用`immer`库来处理不可变数据：

import produce from 'immer';

let state = { count: 0 };
let newState = produce(state, draft => {
  draft.count++;
});

利用Zone.js进行性能优化
- Zone.js简介：Zone.js是Angular应用中用于截获异步操作（如setTimeout、Promise等）的库，它能够自动触发变更检测。
- 优化策略：
  - 控制变更检测触发频率：可以通过NgZone服务来手动控制变更检测的触发时机。例如，在一些性能敏感的操作中（如大量数据的计算），可以暂时退出Angular的NgZone，完成计算后再重新进入NgZone触发变更检测，这样可以避免在计算过程中频繁触发不必要的变更检测。

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

@Component({
  selector: 'app - zone - example',
  templateUrl: './zone - example.component.html'
})
export class ZoneExampleComponent {
  constructor(private ngZone: NgZone) {}

  performHeavyCalculation() {
    this.ngZone.runOutsideAngular(() => {
      // 模拟大量计算
      let result = 0;
      for (let i = 0; i < 1000000; i++) {
        result += i;
      }
      this.ngZone.run(() => {
        // 计算完成后，重新进入Angular Zone，触发变更检测
        // 可以在这里更新组件的状态
      });
    });
  }
}

利用Webpack进行性能优化
- 代码拆分：
  - 问题：随着应用的增长，打包后的JavaScript文件会变得越来越大，导致加载时间变长。
  - 优化：Webpack可以通过代码拆分来解决这个问题。例如，使用import()语法进行动态导入，Webpack会将这些模块拆分成单独的文件，只有在需要时才会加载。例如，在路由模块中：

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  }
];

- **优化打包配置**：
  - **压缩代码**：通过配置Webpack的`UglifyJSPlugin`（在webpack4及之前版本）或`terser - webpack - plugin`（webpack5及之后版本），可以压缩JavaScript代码，去除不必要的空格、注释等，减小文件体积。
  - **Tree - shaking**：Webpack默认支持Tree - shaking，它会自动去除未使用的代码。确保项目中使用ES6模块语法，并且在配置中正确设置，这样Webpack可以在打包时分析模块依赖，只保留实际使用的代码。例如，在`package.json`中设置`"sideEffects": false`，表示所有模块都没有副作用，可以进行Tree - shaking。

星途面试题库

面试题：Angular性能优化策略与实践

知识考点

面试题答案

Angular应用性能问题及优化策略