您正位于 MDN Web 文档的可编辑版本

以 MDN Web 文档用户身份查看: https://developer.mozilla.org/zh-CN/docs/Tools/Memory/DOM_allocation_example

这篇文章描述了一个简单的 Web 页面,它被用于阐述内存工具的一些特性。

你可以在这个网页中试试: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 次, 每次创建一个 DIV 元素
       -> createToolbarButton() // 每次调用 createToolbar() 时,调用 20 次,每次创建一个 SPAN 元素

它总共创建了 200 个 HTMLDivElement 对象和 4000 个 HTMLSpanElement 对象。

文档标签和贡献者

标签: 
此页面的贡献者: RainSlide, wbamberg, xx1124961758
最后编辑者: RainSlide,