replaceChild vs removeChild

JavaScript performance comparison

Revision 2 of this test case created by Erick RIbeiro

Preparation code

<div id="acoes">
  <div id="status" class="disponivel">
    Disponível
  </div>
  <div id="logoff">
    <a href="index.html">Logoff</a>
  </div>
  <div style="clear: both;">
  </div>
</div>

Preparation code output

Disponível

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
removeChild 1
window.onload = function() {
  var status = document.getElementById('status');
  status.removeChild(status.firstChild);
  if (status.className == 'disponivel') {
    var txtStatus = document.createTextNode('Ocupado');
    status.className = 'ocupado';
  } else if (status.className == 'ocupado') {
    var txtStatus = document.createTextNode('Disponível');
    status.className = 'disponivel';
  }
  status.appendChild(txtStatus);
};
pending…
replaceChild 1
window.onload = function() {
  var status = document.getElementById('status');
  if (status.className == 'disponivel') {
    var txtStatus = document.createTextNode('Ocupado');
    status.className = 'ocupado';
  } else if (this.className == 'ocupado') {
    var txtStatus = document.createTextNode('Disponível');
    status.className = 'disponivel';
  }
  status.replaceChild(txtStatus, status.firstChild);
};
pending…
RemoveChild 2
window.onload = function() {
  var status = document.getElementById('status');
  var txtStatus;
  status.removeChild(status.firstChild);
  if (status.className == 'disponivel') {
    txtStatus = document.createTextNode('Ocupado');
    status.className = 'ocupado';
  } else if (status.className == 'ocupado') {
    txtStatus = document.createTextNode('Disponível');
    status.className = 'disponivel';
  }
  status.appendChild(txtStatus);
};
pending…
ReplaceChild 2
window.onload = function() {
  var status = document.getElementById('status');
  var txtStatus;
  if (status.className == 'disponivel') {
    txtStatus = document.createTextNode('Ocupado');
    status.className = 'ocupado';
  } else if (this.className == 'ocupado') {
    txtStatus = document.createTextNode('Disponível');
    status.className = 'disponivel';
  }
  status.replaceChild(txtStatus, status.firstChild);
};
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment