面试题：Angular项目创建后的性能优化考量

组件加载优化

延迟加载（Lazy Loading）
- 做法：在Angular中，可以通过路由配置实现模块的延迟加载。例如，在路由模块中使用loadChildren属性。
```
const routes: Routes = [
  {
    path: 'feature',
    loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule)
  }
];
```
- 原理：延迟加载将组件的加载推迟到实际需要时，减少了初始加载的代码体积，加快了应用的启动速度。浏览器无需一次性下载所有代码，只在用户访问特定路由时才加载对应的模块。

按需加载（On - demand Loading）

做法：对于一些非关键组件，可以在需要时通过ViewContainerRef动态创建组件。

import { Component, ViewChild, ViewContainerRef } from '@angular/core';
import { MyDynamicComponent } from './my - dynamic.component';

@Component({
  selector: 'app - main',
  templateUrl: './main.component.html'
})
export class MainComponent {
  @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer: ViewContainerRef;

  loadComponent() {
    this.dynamicComponentContainer.createComponent(MyDynamicComponent);
  }
}

原理：只有在执行loadComponent方法时，才会创建并加载MyDynamicComponent，避免了不必要的组件在初始时加载，节省了资源。

使用OnPush变化检测策略
- 做法：在组件定义时设置changeDetection: ChangeDetectionStrategy.OnPush。
```
import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app - my - component',
  templateUrl: './my - component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent { }
```
- 原理：Angular默认的变化检测策略是Default，会检查组件树中每个组件的变化。而OnPush策略仅在组件输入引用发生变化，或组件接收到事件（如用户交互事件）时才触发变化检测，减少了不必要的检查，提高了性能。

数据获取优化

缓存数据
- 做法：可以使用服务来缓存数据。例如，创建一个DataService，在服务中定义变量来存储数据，并提供方法来获取和设置数据。
```
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private cachedData: any;

  getData() {
    if (this.cachedData) {
      return this.cachedData;
    }
    // 实际的数据获取逻辑，如HTTP请求
    // 假设使用HttpClient
    // return this.http.get('/api/data');
  }

  setData(data: any) {
    this.cachedData = data;
  }
}
```
- 原理：避免了重复的数据获取操作，特别是对于那些不经常变化的数据。如果数据已经在缓存中，则直接返回缓存数据，减少了服务器请求次数和数据传输量，提高了响应速度。

批量获取数据

做法：如果有多个组件需要从服务器获取数据，尽量将这些请求合并为一个。例如，通过后端API提供一个接口，一次性返回多个组件所需的数据。在前端，可以使用forkJoin来合并多个Observable。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';

@Component({
  selector: 'app - data - component',
  templateUrl: './data - component.html'
})
export class DataComponent {
  constructor(private http: HttpClient) { }

  ngOnInit() {
    const request1 = this.http.get('/api/data1');
    const request2 = this.http.get('/api/data2');

    forkJoin([request1, request2]).subscribe(([data1, data2]) => {
      // 处理获取到的数据
    });
  }
}

原理：减少了HTTP请求的次数，降低了网络开销。每次HTTP请求都有一定的头信息等额外开销，批量获取数据可以有效减少这些开销，提高数据获取效率。

优化HTTP请求
- 做法：合理设置HTTP缓存头。在后端设置合适的缓存策略，如Cache - Control头。在前端，可以使用HttpClient的{ observe: 'response' }选项来处理缓存。
```
this.http.get('/api/data', { observe: 'response' }).subscribe(response => {
  if (response.headers.has('Cache - Control')) {
    // 处理缓存相关逻辑
  }
  const data = response.body;
});
```
- 原理：利用HTTP缓存机制，浏览器可以直接从本地缓存中获取数据，而无需再次向服务器请求，加快了数据获取速度，减少了服务器负载。

星途面试题库

面试题：Angular项目创建后的性能优化考量

知识考点

面试题答案

组件加载优化

数据获取优化