angular - 如何识别非常小的 Angular 应用程序中的内存泄漏

Question

我目前正在开发一个 Angular 应用程序，该应用程序应该 24/7 运行至少一个月(制造软件)。仅客户端接受浏览器每月仅重启一次(维护间隔)。我们正在实现的第一个用例仅包含一个向用户显示一些信息的组件。此时没有用户交互!信息从服务器推送到客户端。目前我只是从服务器轮询数据更新并向用户显示信息。

当前200ms的间隔仅用于研究目的，在实际场景中它将是1000ms。下面的代码会导致 Chrome 中的内存在 3 小时内增加约 40MB，并且 CPU 使用率增加高达 50%(消耗两个核心之一)。

推送通知的目标技术是 SignalR。由于我使用 SignalR 发现了内存问题，因此此处提供的轮询实现用于调查 SignalR 库是否是问题所在。不幸的是，我这里也有同样的问题。

当然，每 30 分钟执行一次 window.location.reload() 可以“解决”问题，但这不是一个好的解决方案。如果我在 3 小时后执行重新加载，页面就会崩溃，Chrome 会显示“哦不……崩溃了”。我使用的是Chrome 73和Edge，使用Edge时内存增加明显高于Chrome。使用 Angular 7.2

<div *ngIf="info" style="width: 100%; height: 100%; margin: 0 auto;">
  <div class="info status{{ info.Status }}">
    <div class="location"><p class="font2">{{ info.Location }}</p></div>
    <!-- ... further div elements here but no other *ngIf or *ngFor -->

        <div *ngIf="info?.Details" class="no-padding">
          <div class="column1 no-padding" *ngFor="let item of info.Details">
            <div class="inverse"><p class="font1">{{ item.Name }}</p></div>
          </div>
        </div>
        <img class="icon" src="assets/Icon{{info.Icon}}.png"/>
    </div>
  </div>
</div>

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription, interval, Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { Info } from '../data/info';

@Component({
  selector: 'app-info',
  templateUrl: './info.component.html',
  styleUrls: ['./info.component.scss']
})
export class InfoComponent implements OnInit, OnDestroy {
  subscribetimer: Subscription;
  subscribelistener: Subscription;
  listener: Subject<Info>;
  info: Info;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.listener = new Subject<Info>();
    this.subscribelistener = this.listener.subscribe(unit => this.info = unit);

    this.subscribetimer = interval(200)
      .subscribe(data => {
        this.http.get<Info>(`http://localhost:5000/poll`)
            .subscribe(res => this.listener.next(res));
      });
  }

  ngOnDestroy() {
    this.subscribetimer.unsubscribe();
    this.subscribelistener.unsubscribe();
  }
}

我希望我可以 24/7 运行这个小型应用程序至少一个月，而不会出现内存和 CPU 消耗问题。

Answer 1

目前尚不清楚泄漏的内容(以及是否泄漏)，因此很难提供特定的建议。不过这里有一些提示:

1) 尝试删除不必要的 Subjects，您只需将 Observable info$ 暴露给 View 即可:

export class AppComponent  {
  info$: Observable<IData>;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.info$ = interval(200)
      .pipe(
        exhaustMap(() =>
          this.http.get<Info>(`http://localhost:5000/poll`)
        )
      );
  }
}

在 View 中，类似:

<div *ngIf="info$ | async as info">
  <div *ngFor="let item of info.items">
    {{item}}
  </div>
</div>

2) 您可能在 http-get 中遇到巨大的超时，例如您的计时器每 200ms 计时一次，而 http-get 可能需要 500ms。 exhaustMap将处理背压，但您应该添加 timeout限制请求时间并一定要添加一些错误处理，因为 http-get 上会有错误。一个非常基本的例子:

this.http.get<Info>(`http://localhost:5000/poll`).pipe(
  // killing requests taking too long
  timeout(400),
  // some error handling logic should go here
  catchError(error => {
    return EMPTY;
  })
)

更复杂的方法可能会有一个超时，其值为 retry .

除此之外，http响应本身也可能是错误的或者是非json的，这会导致错误。所以这里的错误处理是必须的。

这是 more detailed overview of error handling in rxjs .

Stackblitz example for above said .

旁注:您不知道在一个月 24/7 运行时会发生什么。因此，您肯定还想向系统添加一些日志记录。只是为了能够学习，如果失败的话。