メモリの問題を修正する

  • [アーティクル]

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

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

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

ユースケース ツール 記事
Web ページで使用されるメモリの量をリアルタイムで監視します。 Microsoft Edge ブラウザー タスク マネージャー リアルタイムでメモリ使用量を監視する (Microsoft Edge ブラウザー タスク マネージャー)
Web ページのメモリ使用量を一定期間にわたって視覚化します。 パフォーマンス ツール >Memory チェックボックス パフォーマンス機能リファレンスのメモリ リークを視覚化する (パフォーマンス ツール: メモリ チェック ボックス)。
頻繁にガベージ コレクションを見つける。 [Microsoft Edge ブラウザー タスク マネージャー] または [パフォーマンス ツール] >[メモリ] チェック ボックス 下のスポット頻繁なガベージ コレクション (Microsoft Edge ブラウザー タスク マネージャー、パフォーマンス ツールのメモリ チェック ボックス)。
Web ページで使用されるメモリの内容を調べます。 メモリ ツール >Heap スナップショット メモリ ツールを使用してヒープ スナップショットを記録する ("ヒープ スナップショット" プロファイルの種類)
メモリ リークを分離するために、一定期間に作成される JavaScript オブジェクトを確認します。 メモリ ツール >タイムラインでの割り当て タイムラインでの割り当てインストルメンテーションの使用 ("タイムラインでの割り当て" プロファイリングの種類)
一定期間にわたってメモリを割り当てる JavaScript 関数を確認します。 このプロファイルの種類のパフォーマンス オーバーヘッドは最小限で、実行時間の長い操作に使用できます。 メモリ ツール >割り当てサンプリング JavaScript ランタイムの高速化 ("割り当てサンプリング" プロファイルの種類)
DOM ツリーのメモリ リークを見つけます。 メモリ ツール >Detached 要素 DOM メモリ リークのデバッグ ("デタッチされた要素" プロファイリングの種類)

メモリ ツール

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

メモリ ツール

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

デタッチされた要素プロファイル

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ユースケース ツール 記事
デタッチされた要素のみを DOM ツリー ノードとして表示します。 メモリ ツール >Detached 要素 プロファイリングの種類 DOM メモリ リークのデバッグ ("デタッチされた要素" プロファイリングの種類)
JavaScript ソース コードへのリンクを含む、デタッチされた要素を表示するようにフィルター処理されたメモリ内のすべてのオブジェクトを表示します。 メモリ ツール >Heap スナップショット プロファイリングの種類 >Detached メモリ ツール ("ヒープ スナップショット" プロファイルの種類) を使用してヒープ スナップショットを記録するで、DOM ツリーのメモリ リーク ("ヒープ スナップショット" プロファイルの種類>デタッチ済み) を探します。
デタッチされた要素のみを DOM ツリー ノードとして表示し、JavaScript ソース コードへのリンクを表示します。 デタッチされた要素 ツール デタッチされた要素ツールを使用して DOM メモリ リークをデバッグする

関連項目

外：

注

このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここに あり、ケイス・バスクによって作成されています。

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