Angular:并发下载后内存泄漏？

Question

我正在开发一个 Angular 应用程序，我创建了一个这样的下载页面:

如果我查看 Chrome 任务管理器，我会发现与我的应用相关的进程保留了大约 130 MB 的内存。

然后，用户可以点击每个下载按钮启动同时下载(文件总大小为 266 MB):

现在，如果我再次检查任务管理器，我会发现内存使用量在增加，当所有下载完成时，它的峰值约为 650 MB。我注意到一个奇怪的事情:内存的最终使用量似乎是以下公式的总和:

初始内存使用量 + 2 * 文件总大小 = 最终内存使用量

130 MB + 2 * 266 MB = 130 MB + 532 MB = 662 MB = ~650 MB。

如果我尝试使用 Chrome 垃圾收集器，它会减少大约 30 MB，但我的应用程序仍然有 620 MB 的内存使用量。那么，我该如何解决这种行为呢？你能看出我的代码有什么问题吗？(我曾尝试在组件的 ngOnDestroy 上使用 unsubscribe，但没有成功)

这是当我点击文件的下载按钮(从下载页面)时调用的函数:

getFile(file: any): void {
    this.fileDownloadService.downloadFile(file).subscribe(
        (fileinfo: SispFile) => {
            file.downloading = true;
        },
        (err: any) => {
            file.downloading = false;
            console.log('errore', err);
        },
        () => {
            file.downloading = false;
            console.log('completated');
        });
}

这是 FileDownloadService 中的 downloadFile 函数，由 getFile 调用:

downloadFile(file: SispFile): Observable<any> {
    let conf: any = {};
    conf.totalChunks = Math.max(Math.ceil(file.size / this.chunkSizeDownload), 1);
    conf.mime = file.extension;
    conf.currentChunk = 0;
    conf.byteDownloaded = 0;
    conf.chunkSizeDownload = this.chunkSizeDownload;
    conf.chunkBlobs = [];
    conf.finalBlob = null;

    file.progress = 0;

    return new Observable(observer => {
        observer.next(file);
        this.addChunk(file, observer, conf);
    })
}

addChunk(file: SispFile, observer: any, conf: any) {
    if (conf.currentChunk == conf.totalChunks) {
        observer.complete();
        conf.finalBlob = new Blob(conf.chunkBlobs, {type: conf.mime});

        let fileURL = URL.createObjectURL(conf.finalBlob);
        let a = document.createElement("a");
        a.href = fileURL;
        a.download = file.name;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(fileURL);
    } else {
        this.docService.downloadFile(file, conf.chunkSizeDownload, conf.byteDownloaded)
            .then(response => {
                let typedArray = this.createBlob(response['_body'], conf.mime);
                conf.chunkBlobs[conf.currentChunk] = typedArray;
                conf.currentChunk++;
                conf.byteDownloaded = conf.currentChunk * conf.chunkSizeDownload;
                if (conf.Downloaded + this.chunkSizeDownload > file.size) {
                    conf.chunkSizeDownload = file.size - conf.Downloaded + 1;
                }

                let progress = Math.round((conf.currentChunk * 100) / conf.totalChunks);
                file.progress = progress;
                observer.next(file);
                this.addChunk(file, observer, conf);
            })
            .catch((error: ErrorMessage) => {
                observer.error(error);
                console.log('Errore server: ' + error);
            });
    }
}

这是对DocService中后端端点的最终调用:

downloadFile(file: SispFile, length: number, offset: number) {
    let url = Util.format(this.downloadFileUrl, {id: file.id});
    let body: any = { "downloadMode": "PAYLOAD", "fileId": file.id, "length": length, "offset": offset };
    return this.http.post(url, body)
        .toPromise()
        .then(response => {
            return response;
        })
        .catch(this.handleError);
}

Answer 1

我发现 Angular 有这个 Testability类(class)。它的定义:

The Testability service provides testing hooks that can be accessed from the browser and by services such as Protractor. Each bootstrapped Angular application on the page will have an instance of Testability.

并且您可以通过 TestabilityRegistry 访问特定元素的可测试性实例的全局注册表 .

正如我们在 this issue 中看到的那样，销毁组件不会释放浏览器的内存，因为可测试性 API 不会释放它的引用。

因此，也许通过在销毁时清理 TestabilityRegistry 可以帮助您摆脱那些加起来导致 620MB 内存泄漏的引用。

这里是 the fix我找到了!

我希望这对解决您的问题有所帮助，或者至少我希望我能设法给您一个不同的观点或一个新的研究领域!

更新:

据我所见，为了清理 TestabilityRegistry:

在 modules/@angular/core/src/testability/testability.ts 中:

destroy(): void {
  this._applications.clear();
  testabilityGetter.onDestroy();
}

这将是 destroy 方法。

在modules/@angular/core/src/application_ref.ts中:

this._injector.get(TestabilityRegistry).destroy();

我们调用 destroy 方法。

在 modules/@angular/platform-b​​rowser/src/browser/testability.ts 中:

onDestroy(): void {
   delete global.getAngularTestability;
   delete global.getAllAngularTestabilities;
   delete global.getAllAngularRootElements;
   delete global.frameworkStabilizers;
}

销毁时，我们确保删除可测试性实例。

查看this commit . 它向您展示了如何清理 TestabilityRegistry。