この記事では、メモリーツールの機能を示すために使用するシンプルなページについて説明します。
これは https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html で試すことができます。
このページは、大量の DOM ノードを生成するスクリプトが含まれています:
var toolbarButtonCount = 20; var toolbarCount = 200; function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function createToolbarButton() { var toolbarButton = document.createElement("span"); toolbarButton.classList.add("toolbarbutton"); // stop Spidermonkey from sharing instances toolbarButton[getRandomInt(0,5000)] = "foo"; return toolbarButton; } function createToolbar() { var toolbar = document.createElement("div"); // stop Spidermonkey from sharing instances toolbar[getRandomInt(0,5000)] = "foo"; for (var i = 0; i < toolbarButtonCount; i++) { var toolbarButton = createToolbarButton(); toolbar.appendChild(toolbarButton); } return toolbar; } function createToolbars() { var container = document.getElementById("container"); for (var i = 0; i < toolbarCount; i++) { var toolbar = createToolbar(); container.appendChild(toolbar); } } createToolbars();
このコードの動作を簡単に表現すると、以下のようになります:
createToolbars() -> createToolbar() // 200 回呼び出され、毎回 1 個の DIV 要素を生成します -> createToolbarButton() // Toolbar ごとに 20 回呼び出され、毎回 1 個の SPAN 要素を生成します
最終的に、200 個の HTMLDivElement
オブジェクトと 4,000 個の HTMLSpanElement
オブジェクトを生成します。