メモリの問題を修正する

メモリ リーク、メモリの膨らみ、頻繁なガベージ コレクションなど、ページのパフォーマンスに影響するメモリの問題を見つけるには、次のツールを使用します。

• Microsoft Edge ブラウザー タスク マネージャー。
• パフォーマンス ツールの [メモリ] チェック ボックス。
• メモリ ツールのさまざまなプロファイリングの種類。

メモリ使用量を調査するためのツール

メモリ ツール

メモリの問題を調査するためのメイン ツールは、メモリ ツールです。

メモリ ツールのデタッチされた要素プロファイル:

プロファイリングの種類のオプション ボタンの一覧に戻すには、 メモリ ツールの左上にある [ プロファイル ] () をクリックします。

メモリの問題の修正の概要

RAIL パフォーマンス モデルの精神では、パフォーマンスの取り組みの焦点はユーザーである必要があります。

メモリの問題は、多くの場合、ユーザーが認識できるため重要です。 ユーザーは、次の方法でメモリの問題を認識する可能性があります。

• ページのパフォーマンスは、時間の経過と同時に徐々に悪化します。 これは、メモリ リークの症状である可能性があります。 メモリ リークは、ページのバグによって、ページが時間の経過と同時に徐々に多くのメモリを使用する場合です。

• ページのパフォーマンスは一貫して悪いです。 これは、メモリの膨らみの症状である可能性があります。 メモリの膨らみは、ページが最適なページ速度のために必要以上に多くのメモリを使用する場合です。

• ページのパフォーマンスが遅れているか、頻繁に一時停止しているように見えます。 これは、ガベージ コレクションが頻繁に発生する可能性があります。 ガベージ コレクションは、ブラウザーがメモリを解放する場合です。 この問題が発生するタイミングは、ブラウザーによって決定されます。 コレクション中に、実行中のすべてのスクリプトが一時停止されます。 そのため、ブラウザーが大量のガベージ コレクションを行っている場合、スクリプト ランタイムは大量に一時停止されます。

メモリの膨らみ: "多すぎる" の量はどのくらいですか?

メモリ リークは簡単に定義できます。 サイトがますます多くのメモリを使用している場合は、リークが発生します。 しかし、メモリの膨らみは、ピン留めするのが少し難しいです。 "メモリの使用量が多すぎる" と見なされるものは何ですか?

デバイスとブラウザーの機能が異なるため、ここではハードナンバーはありません。 ハイエンドスマートフォンでスムーズに動作する同じページは、ローエンドスマートフォンでクラッシュする可能性があります。

ここで重要なのは、RAIL モデルを使用し、ユーザーに焦点を当てることです。 ユーザーに人気のあるデバイスを確認し、それらのデバイスでページをテストします。 エクスペリエンスが一貫して悪い場合は、ページがそれらのデバイスのメモリ機能を超える可能性があります。

頻繁にガベージ コレクションを見つける (Microsoft Edge ブラウザー タスク マネージャー、パフォーマンス ツールの [メモリ] チェック ボックス)

ページが頻繁に一時停止しているように見える場合は、ガベージ コレクションの問題が発生する可能性があります。 頻繁にガベージ コレクションを見つけるために、次のいずれかを使用できます。

• Microsoft Edge ブラウザー タスク マネージャー。 メモリまたは JavaScript メモリの値が頻繁に上昇および低下する場合は、ガベージ コレクションが頻繁に発生します。 「 メモリ使用量をリアルタイムで監視する (Microsoft Edge ブラウザー タスク マネージャー)」を参照してください。

• パフォーマンス ツールの [メモリ] チェック ボックス。 パフォーマンス メモリ記録では、JS ヒープまたはノード数グラフに対する頻繁な変更 (上昇と下降) は、ガベージ コレクションが頻繁に発生することを示します。 パフォーマンス機能リファレンスの 「メモリ メトリックの表示 」 を参照してください。

これらのツールのいずれかを使用して問題を特定したら、タイムラインプロファイルの種類でメモリ ツールの割り当てを使用して、メモリが割り当てられている場所と、割り当ての原因となっている関数を確認できます。 「タイムラインでの割り当てインストルメンテーションの使用 ("タイムラインでの割り当て" プロファイリングの種類)」を参照してください。

デタッチされた要素からの DOM ツリー メモリ リークを検索する

DOM ノードは、ページ上で実行されている DOM ツリーまたは JavaScript コードからのノードへの参照がない場合にのみ、ブラウザーによってガベージ コレクションされます。 ノードは DOM ツリーから削除されると "デタッチ" されると言われますが、一部の JavaScript では引き続き参照されます。 デタッチされた DOM ノードは、メモリ リークの一般的な原因です。

デタッチされた要素を調査するためのツール

関連項目

• タイムラインでの割り当てインストルメンテーションの使用 ("タイムラインでの割り当て" プロファイリングの種類)
• デタッチされた要素ツールを使用して DOM メモリ リークをデバッグする
• メモリ ツールを使用してヒープ スナップショットを記録する ("ヒープ スナップショット" プロファイルの種類)

外：

• Chrome DevTools を使用した JavaScript でのメモリ リークの検出とデバッグ - スライド デッキ (Gonzalo Ruiz de Villa による)、Microsoft Edge DevTools にも適用されます。

この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。