DOM Manipulation jQuery vs Native

JavaScript performance comparison

Test case created by Joan Leon

Preparation code

<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

    

Preparation code output

<div id="container"></div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
jQuery append
$("#container").append("<p>more content</p>");
pending…
Native innerHTML
document.getElementById("container").innerHTML += "<p>more content</p>";
pending…
Native appendChild
var eParagraph = document.createElement("p");
eParagraph.appendChild(document.createTextNode("more content"));
document.getElementById("container").appendChild(eParagraph);
pending…
jQuery empty
$("#container").empty();
pending…
Native empty
document.getElementById("container").innerHTML = null;
pending…
Native removeChild
var eContainer = document.getElementById("container");
while (eContainer.lastChild) {
  eContainer.removeChild(eContainer.lastChild);
}
pending…
jQuery remove
$("#container").remove();
pending…
Native removeChild
var eContainer = document.getElementById("container");
eContainer.parentNode.removeChild(eContainer);
pending…

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

Compare results of other browsers

0 Comments