Vanilla JS FTW (jQuery vs. JS) (v8)

Revision 8 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div>
  <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
</div>
<div>
  <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
</div>
<div>
  <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
</div>
<div>
  <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
</div>
<div>
  <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
</div>
<div>
  <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
</div>
<div>
  <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
</div>
<div>
  <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
</div>
<div>
  <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
</div>
<div>
  <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
</div>
<div id="wrap">
  <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
  <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
  <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
  <div>
      <img src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
  </div>
</div>
<div>
  <img id="about" src="http://www.zssmt.sk/e107/e107_images/icons/icon20.png">
</div>

Setup

newDiv = document.createElement("div");
  $newDiv = $("<div/>");

Teardown



            var divs,
      newDiv,
      $newDiv,
      parent,
      cloned,
      nextElement;

Test runner

Ready to run.

Testing in
TestOps/sec
fetch elements by tag (jQuery)
divs = $("div");
ready
fetch elements by tag (raw JS)
divs = document.getElementsByTagName("div");
ready
create element (jQuery ..)
newDiv = $("<div/>");
ready
create element (raw JS ++)
newDiv = document.createElement("div");
ready
Add class ..
$newDiv.addClass("foo");
ready
Add class ++
newDiv.classList.add("foo");
ready
Append new element ..
$("body").append("<p/>");
ready
Append new element ++
document.body.appendChild(document.createElement("p"));
ready
Filter elements, add attribute ..
$("img").filter(":first").attr("alt", "Hi!");
ready
Filter elements, add attribute ++
document.querySelector("img").setAttribute("alt", "Hi!");
ready
Parent of ID node ..
parent = $("#about").parent();
ready
Parent of ID node ++
parent = document.getElementById("about").parentNode;
ready
Clone ID node ..
cloned = $("#about").clone();
ready
Clone ID node ++
cloned = document.getElementById("about").cloneNode(true);
ready
Empty ID node ..
$("#wrap").empty();
ready
Empty ID node ++
var wrap = document.getElementById("wrap");
while (wrap.firstChild) {
  wrap.removeChild(wrap.firstChild);
}
ready
Find next() of ID node ..
nextElement = $("#wrap").next();
ready
Find next() of ID node ++
nextElement = document.getElementById("wrap").nextSibling;
ready

Revisions

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