Google Chrome runs web pages and applications with lightning speed.

高度なサービスを提供するWebアプリケーションの実装はますます複雑化しており、メモリの消費量も増え続けている。複数のフレームワークを活用した複雑なシステムでは、どのコードやオブジェクトがメモリを消費し、どこでメモリリークが発生しているのかのトレースが難しくなる。そういった場合に活用できるChromeの機能がChromium Blogの「Put JavaScript memory under control」で公開されている。Chromeにどういった機能が用意されているのか把握するうえで参考になる。

まずページごとにどの程度のJavaScriptメモリが消費されているのか計測する方法として、タスクマネージャを使う方法が紹介されている。設定ボタンから「ツール」「タスクマネージャ」を選択してタスクマネージャを表示させる。タスクマネージャで右クリックし、「JavaScript メモリ」を選択する。これでそれぞれどれくらいのメモリがJavaScriptに使われているかを把握できる。

設定ボタンから「ツール」「タスクマネージャ」を選択してタスクマネージャを表示。デフォルトではJavaScriptメモリは表示されない。

タスクマネージャで右クリックし、「JavaScript メモリ」を選択。これでJavaScriptが消費しているメモリ容量が表示される。

時系列にどの程度のメモリが消費されてるのか調査する方法としてはデベロッパツールを使う方法が説明されている。設定ボタンから「ツール」「デベロッパーツール」を選択してデベロッパツールを起動。パネルの種類として「Timeline」を選択し、さらに種類として「Memory」を選択したうえで、レコードを開始する。レコードを開始した時点からヒープの消費量が時系列に表示されるようになる。

設定ボタンから「ツール」「デベロッパーツール」を選択してデベロッパツールを起動。

パネルの種類「Timeline」を選択し、種類として「Memory」を選択し、レコード開始。ヒープの消費量が時系列に表示される。

メモリ使用量をより詳細に調査し、さらにメモリリークを発見する方法としてChrome Canary / Dev版に導入された「HEAP SNAPSHOTS」の機能も紹介されている。デベロッパツールのパネルとして「Profiles」を選択。種類として「HEAP SNAPSHOTS」を選択した上で、目のアイコンをクリック。その時点でのヒープのスナップショットが取得され、ヒープの使用状況をさまざまな角度から調査できるようになる。

ヒープのある時点での状況を詳細に調査可能。メモリの使用量はもちろん、どこがメモリリークになっているかを発見しやすくなる。

JavaScriptのメモリリークのみならずDOMのメモリリークもこのツールを使って調査できる。

「HEAP SNAPSHOT」の主な特徴は次のとおり。

  • スナップショット間の差分機能
  • コンストラクタによるオブジェクトのグルーピング機能
  • Dominatorツリー表示
  • パス先としてGCルートまたはウィンドウオブジェクトのどちらかを選択可能

JavaScriptからメモリ使用量を知る方法としてはwindowプロパティの「performance.memory」を使う方法も紹介されている。このプロパティを有効にするには「--enable-memory-info」オプションを指定してChromeを起動する必要がある。