アプリケーションのJavaScriptコードが、ブラウザのゴミ箱にゴミ箱に登録するのではなく、メモリ内のより多くのオブジェクトをメモリ内に保持すると、メモリのリークが発生します(GC)。長時間実行アプリの場合、わずか数キロバイトの小さなメモリリークが時間の経過とともに著しく低下することができます。

React Frameworkを使用するWeb開発者は、ReactがDOMの仮想化されたコピーを管理していることを知っています。コンポーネントを適切にアンマウントすることに失敗すると、仮想DOMの大部分が漏れるアプリケーションが潜在的につながる可能性があります。

Microsoft Edgeチームは、Microsoft Edge DevToolsの新しい<elected要素ツールを発表するのに非常に興奮しています。 DOMメモリリークを調査して解決するのに役立ちます。マイクロソフトチームでの友達に触発されたこのツールは、すでに私たち自身のWebサイトやアプリの多くを改善するのを助けました。

埋め込みビデオはInternet Explorerではサポートされていません – YouTubeの時計

離脱要素とDOMリーク

あなたがあなた自身のWebコンテンツでこの新しいツールを試す前に、切り離された要素とDOMの漏れの間のいくつかを理解することが重要です。

通常、JavaScriptにDOMノードを作成してページ内のどこかを挿入して表示します。しかし、ノードを作成し、それらを添付したり、ページからノードを削除したり、JavaScriptで参照したりしないことが可能です。

このコード例では、DOMツリーからノードを入手し、ツリーから削除し、それをJavaScriptアレイに保存します。

コード: const listofelements = []; const divelement = document.querySelector( \’。my-element-class\’); divelement.remove(); listofelements.push(divelement);

この要素A と呼びます。切り離された要素

ツリーから要素を切り離すための有効な理由があります。アプリケーションは、ビューから要素を削除したいが、後でまたは別の場所で再接続することをお勧めします。たとえば、Twitterはフィードをスクロールするときにツイートをデタッチして再接続します。

DOMのメモリリークは、アプリケーションが実際に後で再利用することなく、アプリケーションがこれらの切り離された要素を参照しているときに発生します。

アプリケーションコードがサイズと複雑さで成長するにつれて、間違いを鳴らして物事をきれいにすることを忘れやすくなり、これは無意識のうちにDOM要素をメモリに保存する可能性があります。

これは長時間実行中のアプリケーションにとって特に問題です。電子メールを開閉するたびにDOM要素を切り離す電子メールクライアントを想像してみてください。ユーザーが毎週アプリを実行している場合、これは特に切り離された要素がそれらと多くのデータを運ぶかもしれないので、これは実際に高いメモリ使用量に時間を経つにつれて、デバイス全体を時間の経過とともに遅くする可能性があります。

切り離された要素の紹介工具

DOMのメモリリークを見つけて修正するために、MicrosoftのエッジチームはMicrosoftチームと協力して、切り離された要素を検出して表示するツールを構築しました。

Microsoft Edge 97から開始された新しいデタッチ要素 のパネルが入手可能です。

DOMリークを調査しましょう

ツールがどのように機能するかを確認するには、定期的にUIに追加されているメッセージとチャットアプリケーションを模倣するデモAppを使用しています。 パネル。

コマンドメニューを使用するか、ツールバーの + ボタンをクリックして、利用可能なツールのリストを表示し、デタッチ要素を選択します。

デモAppにエレメントを切り離したかどうかを確認できます。これを行うには、しばらくの間、メッセージを生成し、部屋間の切り替えをします。次に[<B]をクリックします。以下に示すように、デタッチされた要素を持つレポートを表示します。

ノードはDOMにはなくドームにはないため、デタッチされることがありますが、後でブラウザによってガベージコレクション(GC)になることができます。このツールにもGCを強制する方法が付属しているため、 [ゴミ箱]ボタンを使用してこれらのノードを取り除くことを確認してください。

私たちの目標は、リストが常に空であることを確認することではありません。私たちのアプリは意図的に要素を切り離すかもしれません。しかし、要素のリストは意味があるはずです。切り離された要素ツールがアプリ内のアクションを実行した後に新しいノードを報告すると、それらを再利用するのではなくノードを再作成していることを意味します。

スイッチングルーム

DEMOアプリでDOMリークを調査しやすくするために、簡単なテストに焦点を当てましょう。部屋の切り替えが切り離された要素にどのように影響するかを調べます。

部屋1に行き、いくつかのメッセージを生成します。

部屋2に切り替えて別のメッセージを生成します。

部屋3に切り替えます。

切り離された要素のリストを取得します。

これを行った後、これが私たちが得るものです:

私たちが部屋から切り離すと、そのメッセージのすべてを切り離します。

私たちはまた、これがリークではなく意図的なデザインではないことを確認することもできます。私たちが再び部屋2に戻って再び部屋3に戻っても、ドームに再接続され、部屋に表示されます。しかし、ツールの別の機能を使ってさらに進みましょう。

Analyze 機能を使用します。

Analyze をクリックすると、メモリツールを開き、ヒープスナップショットを記録します。ヒープスナップショットでは、ページで使用されているメモリが使用するJavaScriptとDOMオブジェクトの中にどのように使用されているかに関する情報が特定の時点で表示されます。

Analyze ボタンを使用すると、 ID列のリンクをクリックすると、切り離されたノードからヒープスナップショットの特定の場所へ直進できます。

ID をクリックすると、メモリツールはヒープスナップショットの右行に直接スクロールし、リテーナのリストを表示します。つまり、切り離された要素では、JavaScriptプログラムのどのオブジェクトがまだそれを参照しているのかを知ることができます。

RETAINES セクションの room.js をクリックしましょう。

これで、クラス room unmount プロパティがメッセージ要素を保持している行の sources ツールに入っています。

sources ツールでこのファイルを見ると、のunkount 配列がどのように使用されるかを明らかにします。

コード: hide(){this.chatel.QuerySelectorすべて( \’。メッセージ\’)。Foreach(EL => {this.unmounted.push(EL)})。 this.Empty()} show(){this.Empty();この.unmounted.foreach(EL => {this.chatel.appendchild(EL);})。ここで起こるように思われるものは、部屋が隠されているとき、それはそのすべてのメッセージを収集し、それらを配列にプッシュすることです。また、部屋が再度表示されると、メッセージは再び部屋のDOMツリーに追加されます。

これはデザインと一致しているようです。

ただし、クラスを見ると、 unkounted 配列が空になっていないことがわかります。部屋が部屋を出ることによって部屋が取り除かれると、メッセージがメモリから解放されることができない漏れが発生する可能性があります。

これを確認して、部屋1と2の閉じるボタンをクリックしてから、デタッチされた要素をもう一度入手しましょう。

関連する部屋が削除されていても、3つの切り離されたメッセージはまだここにあります。これで、これらのメッセージがアプリで再利用されないため、Real DOMメモリリークです。

Destroyメソッドを room クラスに追加してこれを修正しましょう。

コード: destroy(){this.unmounted = [];}

その後、部屋が閉じているときにこの方法を呼び出します。

同じテストをもう一度実行しましょう:部屋1と2でメッセージを作成し、部屋3に切り替え、部屋1と2を閉じると、 離脱要素ツールを開くと、これを確認できます。シナリオはもうDOMノードをリークしません。このデモアプリは別のDOMリークを含みます。 のハイトラフィックボタンをしばらくシミュレートしてみてください。一部の切り離された要素が表示されます。ツールを探索すると、各部屋が再利用可能なメッセージのキャッシュを管理することを確認できます。残念ながら、実装は競合状態を説明していません。これは、ますます多くのDOMノードを蓄積するようになります。

それを試してみて、あなたがどう思うのか教えてください

このデモアプリと漏れは人工的です。あなたは潜在的な問題を見つけることができるかどうかを確認するために、あなたは本物の本番アプリ上のツールを試すべきです。

私たちはあなたが分離された要素ツールについてどう思うかを聞きたいです。フィードバックは歓迎以上のものです。

DevToolsまたはTweeting @edgedevtoolsのフィードバックボタンをクリックするだけで、DevToolsチームと連絡を取ることができます。

Microsoft Edge DevToolsのマニュアルのこのツールに関するドキュメントを読むこともできます。

幸せなメモリリークデバッグ!

– Patrick Breosset、シニアプログラムマネージャ、マイクロソフトエッジ

ソース:マイクロソフトエッジ切り離された要素ツールによるデバッグメモリリーク

By admin

Leave a Reply

Your email address will not be published.