DOMメモリリークのデバッグツール「Detached Element」、Microsoft EdgeのDevToolsに搭載

2021年12月15日

マイクロソフトは、Microsoft Edgeに搭載している開発者向けツールDevToolsに、DOMのメモリリークを検出、解析するデバッグツール「Detached Element」を搭載したと発表しました

JavaScriptを用いたDOMの操作によってWebブラウザの表示を動的に変更することは、ごく一般的な操作です。例えば、新たなDOMのノードを作成してDOMツリーのどこかに挿入する、あるいはDOMツリーのどこかのノードを削除する、といったことが行われます。

このとき、DOMのノードを作成したまま、しばらくDOMツリーに挿入することなく保持している状態や、DOMツリーのどこかのノードをDOMツリーから外し、別のところに挿入するまでしばらく保持している、という状態も存在します。

この、Webブラウザ上のDOMツリーから外れ、JavaScript上で保持されたままのDOMツリーのことをマイクロソフトは「Detached elements」(外れ要素)と呼んでいます。

Detached elementsは、あとでDOMツリーのどこかに組み込まれるなど、適切に処理されれば問題になりませんが、ずっと保持したままで、さらに次のDetach elementsが次々に生成されるようでは、どんどん不要なメモリを消費していくことになります。

長時間この状態が続くとWebブラウザの動作が遅くなり、不安定になっていきます。「DOMのメモリリーク」が起きた状態です。

Microsoft Edgeに搭載される「Detached Element」ツールは、こうした状態を発見、解析し、デバッグするためのツールだと説明されています。

Detached elementsツール

マイクロソフトのブログ「Debug memory leaks with the Microsoft Edge Detached Elements tool」から、概要を見てみましょう。

Detached elementsツールが搭載されると、DevToolsにDetached elementsメニューが追加されます。これを選択すると、ツールが実行されます。

fig

すると、メインのDOMツリーから外れているノードの一覧が表示されます。

fig

アナライズボタンをクリックするとメモリタブが開いて、ヒープメモリ上のどの要素が、どのDOM要素のIDと対応しているのか、それがコード上のどこで生成されたのかを見ることができます。

fig

そこからソースコードをたどることも可能。

fig

このようにして、DOMによるメモリリークを生成するコードになっていないかどうかを確認できるとのことです。詳しくはブログと、下記の動画などをご覧ください。

Detached elementツールは11月30日に配布が開始されたMicrosoft Edge 97から利用可能になっています。

このエントリーをはてなブックマークに追加
follow us in feedly


関連タグ JavaScript / プログラミング言語 / Microsoft / Microsoft Edge / Webブラウザ



タグクラウド(β版)

クラウド / AWS / Azure / Google Cloud
コンテナ / Docker / Kubernetes
クラウドネイティブ / サーバレス
クラウド障害 / 運用・監視

プログラミング言語 / 開発ツール
JavaScript / Java / .NET / WebAssembly
HTML/CSS / Web標準
アジャイル開発 / スクラム / DevOps / CI/CD
ソフトウェアテスト・品質
ローコード/ノーコード開発

データベース / RDB / NoSQL / 機械学習・AI
Oracle Database / MySQL / PostgreSQL
Office / 業務アプリケーション

ネットワーク / HTTP / QUIC / セキュリティ
OS / Windows / Linux / VMware
ハードウェア / サーバ / ストレージ

業界動向 / 働き方 / 給与・年収
編集後記 / 殿堂入り / おもしろ

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed


最新記事10本