メモリの問題を修正する

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

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

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

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

メモリ ツール

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

メモリ ツール

メモリ ツールの [切断された要素] プロファイル:

切断された要素のプロファイル

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

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

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

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

  • ページのパフォーマンスは、時間の経過とともに徐々に低下します。 これは、メモリ リークが発生している可能性があります。 メモリ リークとは、ページのバグが原因で、時間の経過と共にページが徐々に多くのメモリを使用する状況です。

  • ページのパフォーマンスが一貫して悪い。 これは、メモリの肥大化の症状である可能性があります。 メモリの膨張とは、ページが最適なページ速度に必要な量を超えて多くのメモリを使用する場合のことです。

  • ページのパフォーマンスが遅延しているか、頻繁に一時停止しているように見えます。 これは、ガベージ コレクションが頻繁に行われる現象である可能性があります。 ガベージ コレクションは、ブラウザーがメモリを再利用する場合です。 これがいつ行われるかはブラウザーが決定します。 収集中、実行されているすべてのスクリプトが一時停止されます。 したがって、ブラウザが大量にガベージ コレクションしている場合、スクリプト ランタイムは大量に一時停止されます。

メモリ膨張: 「多すぎる」とはどのくらいですか?

メモリ リークを定義することは簡単です。 サイトのメモリ使用量が徐々に増えている場合、リークが発生しています。 しかし、メモリの肥大化を特定するのは少し難しいです。 何が "メモリを使用しすぎている" とみなされますか?

デバイスやブラウザーによって機能が異なるため、ここには確固たる数字はありません。 ハイエンドのスマートフォンでスムーズに実行された同じページが、ローエンドのスマートフォンではクラッシュする可能性があります。

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

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

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

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

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

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

切り離された要素から DOM ツリーのメモリ リークを見つける

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

切断された要素を調査するためのツール

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

関連項目

外部:

注

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

Creative Commons ライセンス この著作物は、 Creative Commons Attribution 4.0 International License に従って使用許諾されています。

  • 最終更新: