HereMaps Javascript MemoryLeak？

Question

我目前正在尝试在我的angular应用程序中查找一些潜在的内存泄漏，并且发现了一些应该与我在一个组件中使用的hereMap相关的东西。情况是这样的：

我有一个Angular 12 SPA，有两个组件：

ComponentA -完全空的角度组件-仅用于远离组件B的布线

ComponentB -使用hereMap的组件。

当将路由从组件A切换到B再到A时，我希望垃圾收集器在一段时间后返回A或在DevTools中单击“收集垃圾”时删除大部分已分配的内存。

这就是让我发疯的原因：

每次我使用ComponentB时，似乎mapsjs-core.js添加了一个新的TileManager，它永远留在内存中，并保存大量的对象和数组(每次3.5k数组和10k对象)，每次加起来就像3-5mb内存。

Heap Snapshot

这些对象包括TileManagers的多个实例中的纹理、网格、盾牌等(创建ComponentB的新实例3次后的TileManager_0、TileManager_1、TileManager_2 )。

在ComponentB的ngOnDestroy被调用后，ComponentB不再是内存的一部分，因此释放映射似乎如预期的那样工作。

下面是这些组件的外观：

​

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

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html',
  styleUrls: ['./component-a.component.styl']
})
export class ComponentAComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

​

​

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

@Component({
  selector: 'app-component-b',
  templateUrl: './component-b.component.html',
  styleUrls: ['./component-b.component.styl']
})
export class ComponentBComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild('map') public mapElement: ElementRef;
  private map: H.Map;
  private platform: H.service.Platform;
  constructor() { }

    ngOnInit(): void {
        this.platform = new H.service.Platform({
          apikey: myKey
      });
    }
  
    ngAfterViewInit() {
        const defaultLayers = this.platform.createDefaultLayers();
        // Set min and max zoom level
        defaultLayers.vector.normal.map.setMax(16);
        defaultLayers.vector.normal.map.setMin(2);

        // Initialize the map
        this.map = new H.Map(
            this.mapElement.nativeElement,
            defaultLayers.vector.normal.map,
            {
                zoom: ZoomLevels.ZOOM_MIN_SINGLE_MAP
            }
        );
    }
    
    public ngOnDestroy(): void {
        this.map.dispose();
    }

}

​

Answer 1

我们在简单的普通Javascript应用程序和angular应用程序上进行了性能测试。并且对象将根据需要从堆内存中释放。请找到下面所附的结果。

​

​

请注意，Map不应该处理任何其他对象，而是它自己，因此应用程序必须显式地处理应用程序创建的任何其他资源。原因很简单:让我们以一个应用程序为例，该应用程序创建了一个提供程序并填充了它，该应用程序可能决定重用该提供程序，但会处理该映射。请点击下面的链接获取最佳实践。

HERE Maps API for Javascript的1>Workinghttps://developer.here.com/documentation/maps/3.1.25.0/dev_guide/topics/get-started.html

2>Angular示例。

https://developer.here.com/blog/display-here-maps-angular-web-application(please在angular的ngOnDestroy方法中添加对heremap对象的处理，即this.map.dispose())

3>Best实践。

https://developer.here.com/documentation/maps/3.1.25.0/dev_guide/topics/best-practices.html