Question

由于存储器使用方面的问题，我完全失去并且总是放弃使用Angular 2来构建真实世界的应用程序。

我遵循了所有最好的编码实践，例如在不再需要时清空所有属性，删除对属性的所有引用，清空数组等，正确解决闭包等等等等。

无论如何，在Angular 2中测试一些非常基本的功能时，我会继续在运行期间为DOM的所有基本操作中不断增加的内存使用量。

只有一个例子，在执行期间使用大块内存，永远不会收集垃圾：

随着时间的推移动画div的宽度。

我试图以不同的方式实现这种UI行为，最有效的方法是使用requestAnimationFrame的间隔，并将它全部包装在Angular的zone.runOutsideOfAngular方法中。

无论如何，将以下行放在循环中会使用大量的内存，即使在使用cancelAnimationFrame正确取消循环之后也不会进行垃圾回收，将循环内使用的属性与对div的所有引用一起归零并删除div来自DOM。

this.renderer.setStyle(this.progressBar.elRef.nativeElement.querySelector('.progress-inner'), 'width', percentProgress+'%');

我确信你可以告诉我，这是从修改进度条宽度的方法中获取的一条线。再说一遍，请注意我尝试以不同的方式实现进度条。使用CSS来动画而不是上面概述的方法。

总的来说，似乎无论我做什么 - 无论我尝试实现什么，有许多与动画有关的动作 - 即使像滚动这样的东西似乎也需要不断增加的内存量执行永远不会在Angular 2应用程序内部进行垃圾回收。

简而言之，这篇文章不是特定于间隔，也不是动画div的宽度。几乎Angular 2应用程序中的任何任务似乎都使用了大量的内存，而这些内存从未被垃圾收集。

有人可以提供任何指导吗？推荐一本关于内存使用和Javascript的书？

我遇到过大量内存使用问题确实令人难以置信地令人沮丧。推动我想放弃一起使用Angular 2。

Answer 1

如果您正在使用Observables，请确保unsubscribe()给他们。不要只是将它们设置为null。如果这是你的问题，那么看看智能与表现的组件。这是一个angular2范例，它可以在组件被破坏后为你进行垃圾收集。

过去我已将订阅推送到数组并取消订阅onDestroy

ngOnInit(){
   this.subs.push(this.myObservable.subscribe(/*logic*/))
}

ngOnDestroy() {
  for (let sub = 0; sub < this.subs.length; sub++) {
    this.subs[sub].unsubscribe();
  }
}

同时考虑使用[ngStyle]="{'width': calculateWidth()}"来调整元素的大小对您有用。刚刚在组件中定义了calculateWidth()逻辑，并将转换添加到样式表transition: width .4s cubic-bezier(.25, .8, .25, 1);

尽量避免renderer，存在安全问题。而是采取通过@Input()装饰器将数据传递给子组件的思维方式。然后使用ngOnChanges或changeDetection: ChangeDetectionStrategy.OnPush允许组件重新呈现。 Angular就像那样快，动画仍然可以在渲染之间起作用

Angular 2，Javascript，内存使用和垃圾收集

1 个答案: