角2、Javascript、メモリ使用量、およびガベージコレクション

Question

メモリ使用量に関する問題のために、現実世界のアプリケーションを構築するために一般的に角度2を使用していることをあきらめています。

私は適切に対処する、などの配列を空に、不要になったときに、すべてのプロパティをゼロプロパティへのすべての参照を削除するよう最善のコーディングプラクティスのすべてに従っているの閉鎖などなどなどなど...かかわらず、このの

、 Angular 2のかなり基本的な機能をテストするとき、私はDOMの基本的な操作のすべての種類のために実行時にますます増え続けるメモリ使用量に走り続けます。ごみは収集されません飽きない実行中のメモリの大きな塊を使用

ほんの一例：

時間をかけてdiv要素の幅をアニメーション化。

私は、さまざまな方法でこの種類のUI動作を実装しようとしました。最も効果的なのは、requestAnimationFrameで間隔を使用し、すべてAngularのzone.runOutsideOfAngularメソッドでラップすることでした。

ループ内に次の行を挿入すると、cancelAnimationFrameを使用してループを適切にキャンセルしても、ガベージコレクションされない膨大な量のメモリが使用されます。 DOMからdivを作成します。

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を使用して、コンポーネントの再レンダリングを許可します。角度はそれほど速く、アニメーションはレンダリングの間にまだ動作します