Browser Page Performance: Detached DOM vs display: none; (v4)

Revision 4 of this benchmark created by Oussama on September 22, 2014

Description

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


<div style="overflow: hidden; height: 50px;">
  <div id="clone-container">
    <div id="clone-and-hide-me" class="clone">
        This element isn't empty. <p class="asdf">bacon ipsum</p> dolor <input type="text" value="sit amet" />
    </div>
  </div>
</div>

<script>
  var clone = $('#clone-and-hide-me').remove();
  var cloneContainer = $('#clone-container');
  function setupTest(testNumber) {
    switch (testNumber) {
      case 1:
        break;
      case 2:
        createClones().hide();
        break;
      case 3:
        window.clonesStayInMemory = createClones().remove();
        break;
      default:
        throw new Error("too many tests");
    }
  }
  function createClones() {
    var cloneCount = 10000;
    var clones = new Elements([]);
    for (var i = 0; i < cloneCount; i++) {
      clones.push(clone.clone());
    }
    cloneContainer.empty().adopt(clones);
    return clones;
  };

  var measureCount = 0;
  var currentTestNumber = 0;
  var measureSomething = function(testNumber) {
    if (testNumber != currentTestNumber) {
        currentTestNumber = testNumber;
        setupTest(testNumber);
    }
    measureCount++;
    cloneContainer.css('height', 100 + (measureCount % 100));
    var readTheHeight = cloneContainer.offsetHeight + 0;
  }

</script>

Test runner

measureSomething(1);

measureSomething(2);

measureSomething(3)

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 2: published by Scott Rippey on June 1, 2013
• Revision 3: published by Oussama on September 22, 2014
• Revision 4: published by Oussama on September 22, 2014