Ionic 3 + Firestore + AngularFire性能问题：文档超20个后加载过慢

你的推测完全正确——当每个PostComponent都单独发起Firestore请求时，随着帖子数量增加，并发的Observable订阅和网络请求会急剧上升，直接拖慢应用性能。下面是几个针对这个场景的实用优化策略：

1. 预加载关联数据，避免组件级重复请求 #

核心思路是在FeedComponent获取帖子列表时，一次性批量加载所有PostComponent需要的关联数据（比如用户详情、点赞数等），而不是让每个子组件单独发起请求。这样能把N次请求合并为1次批量请求，大幅减少网络开销和Observable数量。

修改你的getAllPost方法，结合RxJS的forkJoin来批量获取关联数据：

import { forkJoin } from 'rxjs/observable/forkJoin';
import { map } from 'rxjs/operators';

getAllPost(type: string){ 
  return this.afs.collection(`posts`, ref => ref.orderBy("created", "desc") 
  .where("type", "==", type)) 
  .snapshotChanges(["added"])
  .pipe(
    map(actions => {
      // 先整理帖子基础数据
      const postsWithIds = actions.map(a => {
        const data = a.payload.doc.data();
        const id = a.payload.doc.id;
        return { id, ...data };
      });

      // 批量获取每个帖子对应的关联数据（示例为用户文档）
      const postObservables = postsWithIds.map(post => {
        return this.afs.doc(`users/${post.user}`).valueChanges().pipe(
          map(userData => ({ ...post, userDetails: userData }))
        );
      });

      // 合并所有请求，返回包含完整数据的帖子数组
      return forkJoin(postObservables);
    })
  );
}

之后在模板中，直接把预加载好的userDetails传给PostComponent，子组件就不需要再发起请求了：

<div *ngFor="let post of posts | async"> 
  <post *ngIf="post" 
        [userId]="userId" 
        [postId]="post.id" 
        [author]="post.user" 
        [created]="post.created" 
        [postContent]="post.post" 
        [postPicture]="post.picturePath"
        [userDetails]="post.userDetails">
  </post> 
</div>

2. 实现分页/懒加载，控制同时渲染的组件数量 #

不要一次性加载所有帖子，而是分页加载（比如每次加载20条），结合Ionic的InfiniteScroll实现滚动加载。这样页面上同时存在的PostComponent数量始终保持在可控范围内，从根源减少Observable数量。

步骤1：修改FeedComponent的分页逻辑 #

private lastVisible: any; // 记录最后一条帖子的快照，用于分页
posts: any[] = [];

loadPosts(type: string, reset = false) {
  let query = this.afs.collection(`posts`, ref => {
    let refQuery = ref.orderBy("created", "desc").where("type", "==", type);
    if (!reset && this.lastVisible) {
      refQuery = refQuery.startAfter(this.lastVisible);
    }
    return refQuery.limit(20); // 每次加载20条
  });

  query.snapshotChanges(["added"])
    .pipe(
      map(actions => {
        const posts = actions.map(a => {
          const data = a.payload.doc.data();
          const id = a.payload.doc.id;
          return { id, ...data };
        });
        // 更新最后一条帖子的快照
        if (posts.length > 0) {
          this.lastVisible = actions[actions.length - 1].payload.doc;
        }
        return posts;
      })
    )
    .subscribe(newPosts => {
      if (reset) {
        this.posts = newPosts;
      } else {
        this.posts = [...this.posts, ...newPosts];
      }
    });
}

// 初始化加载第一页
ngOnInit() {
  this.loadPosts('your-type', true);
}

步骤2：在模板中添加InfiniteScroll #

<ion-content>
  <div *ngFor="let post of posts"> 
    <post *ngIf="post" [userId]="userId" [postId]="post.id" ...></post> 
  </div>

  <ion-infinite-scroll (ionInfinite)="loadPosts('your-type', false)">
    <ion-infinite-scroll-content loadingSpinner="crescent"></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

3. 优化Observable订阅管理，避免内存泄漏 #

确保PostComponent中的所有Observable都被正确管理，避免无用订阅占用资源：

• 优先使用async管道，它会自动在组件销毁时取消订阅，无需手动处理。
• 如果必须手动订阅，一定要在组件销毁时用takeUntil或者unsubscribe()取消订阅。

比如在PostComponent中：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

private destroy$ = new Subject<void>();

ngOnInit() {
  this.someData$ = this.afs.doc(`some-path`).valueChanges()
    .pipe(takeUntil(this.destroy$)); // 组件销毁时自动取消订阅
}

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

4. 启用Firestore本地持久化 #

开启Firestore的离线缓存功能，让重复请求直接从本地读取，减少网络请求耗时：

// 在AngularFire初始化的地方（比如app.module.ts）
import { AngularFirestoreModule } from '@angular/fire/firestore';

@NgModule({
  imports: [
    AngularFirestoreModule.enablePersistence() // 启用持久化
  ]
})

5. 优化PostComponent的变更检测 #

将PostComponent设置为OnPush变更检测策略，这样只有当输入属性发生变化时，Angular才会触发变更检测，减少不必要的性能消耗：

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

@Component({
  selector: 'post',
  templateUrl: './post.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush // 启用OnPush
})
export class PostComponent {
  // 组件逻辑...
}

这些策略可以组合使用，比如先实现分页+预加载数据，再配合变更检测优化，应该能显著改善应用的加载速度和流畅度。

内容的提问来源于stack exchange，提问作者Benoit