デタッチされた要素ツールを使用して DOM メモリリークをデバッグする

[アーティクル]
07/05/2023

Detached Elements ツールを使用して、ブラウザーでガベージコレクションできないデタッチされた要素を見つけ、デタッチされた要素をまだ参照している JavaScript オブジェクトを見つけます。 JavaScript を変更して要素を解放することで、ページ上のデタッチされた要素の数を減らすことができます。

メモリリークは、要素がドキュメントオブジェクトモデル (DOM) ツリーにアタッチされなくなったが、ページ上で実行されている一部の JavaScript によって引き続き参照されている場合に、アプリケーションで発生する可能性があります。これらの要素はデタッチ された要素と呼ばれます。ブラウザーがデタッチされた要素をガベージコレクション (GC) するには、DOM ツリーまたは JavaScript コードから要素を参照することはできません。

ヒープスナップショットとデタッチされた要素の詳細については、「ヒープスナップショットを使用してデタッチされた DOM ツリーメモリリークを検出する」を参照してください。

「メモリの問題の修正」で説明されているように、メモリの問題は、メモリリーク、メモリの膨らみ、頻繁なガベージコレクションなど、ページのパフォーマンスに影響します。ユーザーの症状は次のとおりです。

ページのパフォーマンスは、時間の経過と同時に徐々に悪化します。
ページのパフォーマンスは一貫して悪いです。
ページのパフォーマンスが遅れているか、頻繁に一時停止しているように見えます。

デタッチされた要素ツールを開く

デタッチされた要素ツールを開き、デモページを読み込むには:

デタッチされた要素のデモアプリケーションを新しいウィンドウまたはタブで開きます。
DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。
DevTools の アクティビティバーで、[ デタッチされた要素 ] タブを選択します。そのタブが表示されない場合は、[ その他のツール ] () ボタンをクリックします。

デタッチされた要素を取得する

デタッチされた要素の取得ツールの [) ボタンは、切断されたすべての要素を Web ページで検索して表示します。

デタッチされた要素を検索するには:

デモアプリケーションで、[ 会議室 1 ] ボタンが選択されていることを確認します。
デモアプリケーションで、[ 高速トラフィック ] ボタンをクリックします。
一部のメッセージが生成され、デモアプリケーションに表示されたら、デモの [停止 ] ボタンをクリックします。
[ 会議室 2 ] ボタンをクリックします。
[デタッチされた要素] ツールで、[デタッチされた要素の取得] ([をクリックします。

[デタッチされた要素] ツールには、ページのすべてのデタッチされた要素が表示されます。デモアプリケーションで Room 2 に切り替えると、 Room 1 で生成されたメッセージは DOM にアタッチされなくなりますが、これらは引き続き JavaScript によって参照されます。

ガベージコレクションをトリガーする

次に、ブラウザーでガベージコレクション (GC) をトリガーします。

[デタッチされた要素] ツールで、[ガベージの収集] アイコン (クリックします。
[ デタッチされた要素の取得 ] (クリックします。

[ ガベージの収集] を選択すると、ブラウザーによってガベージコレクションが実行されます。 [ デタッチされた要素の取得] を選択すると、[ デタッチされた要素] ツールには、ガベージコレクションできないデタッチされたすべての要素が表示されます。これらのデタッチされた要素は、アプリケーションによって再利用されない場合、メモリリークになる可能性があります。

デタッチされた要素を保持する JavaScript コードを特定する

ガベージコレクションできないデタッチされた要素が見つかったら、[デタッチされた要素] ツールの [ 分析 ] () ボタンを使用して、 デタッチされた 要素を参照しているページで実行されている JavaScript コードを特定できます。 [分析] ボタンは、ヒープスナップショットを受け取り、デタッチされた要素の ID にヒープ内の場所を設定します。

ヒープスナップショットの詳細については、「メモリツールを使用してヒープスナップショットを記録する」を参照してください。

デタッチされた要素を参照する JavaScript コードを識別するには:

[デタッチされた要素] ツールで、[分析] ([分析] ) アイコンをクリックします。

メモリ ツールは、DevTools の下部にあるクイックビュー ツールバーで開きます。
[デタッチされた要素] ツールで、デタッチされた要素の [Id] フィールドを選択します。

メモリ ツールは、デタッチされた要素を参照しているヒープ内のオブジェクトを自動的に選択します。次のオブジェクト を Retainers と呼びます。
メモリ ツールで、リンクroom.js:13 を選択します。

[ソース] ツールがアクティビティバーで開き、room.jsファイルの 13 行目が表示されます。
hide()room.jsの関数では、デモアプリケーションの JavaScript コードによって、ルーム内の各メッセージが配列にunmounted追加されます。配列は unmounted 、デタッチされた要素を参照しているオブジェクトです。

これで、デタッチされた要素がブラウザーによってガベージコレクションされるのを妨げているリテーナーが特定されました。

他のノードが保持される DOM ノードを特定する

DOM は完全に接続されたグラフであるため、1 つの DOM ノードが JavaScript によってメモリに保持されると、他の DOM ノードが保持される可能性があります。

ツリー全体が保持される原因となっているデタッチツリー内の原因となるノードを特定するには:

[ 要素のデタッチ ] (をクリックして、デタッチされたツリー内の親子リンクを破棄します。
[ ガベージの収集 ] アイコン (クリックします。

親子リンクは、デタッチされたツリー内で削除されます。

選択したターゲットを別の配信元に変更する

[選択したターゲット] ドロップダウンリストを使用して、異なる配信元またはフレームからデタッチされた要素をチェックできます。

[ 選択したターゲット ] ドロップダウンリストをクリックします。
別の配信元を選択します。

新しい原点は、[ デタッチされた要素 ] ツールに表示されます。

その他の考慮事項

メモリリークを探すときは、リークはアプリケーションのコンテキストに依存する可能性があることを覚えておいてください。デモアプリケーションでは、ブラウザーでガベージコレクションできないデタッチされた要素が見つかり、デタッチされた要素を保持している JavaScript を特定しました。ただし、デモアプリケーションのコンテキストでは、チャットメッセージの一覧を保持して、ユーザーが Room 1 に戻るとメッセージログが保持されるようにするのが理にかなっています。

次の図は、ユーザーが 会議室 2 から会議室1 に戻るときに再アタッチされるメッセージの形式でデタッチされた要素を示しています。

デタッチされた要素は、Room 1 に戻るときに DOM に再アタッチされます

同様に、ソーシャルメディアのフィードは、ユーザーが要素をスクロールしたときに要素を切り離し、ユーザーがスクロールして戻るときに DOM に再アタッチする場合があります。デタッチされた要素は必ずしもメモリリークを示すわけではありません。また、メモリリークはデタッチされた要素によって常に発生するとは限りません。

実行時間の長いアプリでは、わずか数キロバイトの小さなメモリリークによって、時間の経過と同時にパフォーマンスが著しく低下する可能性があります。 React フレームワークを使用する Web 開発者は、Reactが DOM の仮想化されたコピーを保持していることを認識しています。コンポーネントのマウントを適切に解除できないと、アプリケーションが仮想 DOM の大部分をリークする可能性があります。

このデモアプリとそのリークは人工的です。運用 Web サイトまたはアプリでデタッチされた要素ツールをテストします。デタッチされた要素ツールで問題が発生する可能性がある場合は、Microsoft Edge DevTools チームに問い合わせて、デタッチされた要素ツールとメモリリークデバッグに関するフィードバックを送信してください。

デタッチされた要素ツールを使用して DOM メモリ リークをデバッグする