jQuery toghether JavaScript

JavaScript performance comparison

Revision 60 of this test case created by Josue Ponce

Preparation code

<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>
<div id="top" class="mydiv">
  <p id="para_1" class="mytext">
    Paragraph one
  </p>
  <p id="para_2" class="mytext">
    Paragraph two
  </p>
  <p id="para_3" class="mytext">
    Paragraph three
  </p>
  <span id="span_1" class="mytext">
    Text in a span
  </span>
</div>
<p id="para_4" class="mytext">
  Paragraph four
</p>
<p id="para_5" class="mytext">
  Paragraph five
</p>
<p id="para_6" class="mytext">
  Paragraph six
</p>
<script>
  var parent_el = document.getElementById("top");
  var cached = jQuery(parent_el).find('p.mytext');
</script>
    

Preparation code output

<div id="top" class="mydiv"> <p id="para_1" class="mytext"> Paragraph one </p> <p id="para_2" class="mytext"> Paragraph two </p> <p id="para_3" class="mytext"> Paragraph three </p> <span id="span_1" class="mytext"> Text in a span </span> </div> <p id="para_4" class="mytext"> Paragraph four </p> <p id="para_5" class="mytext"> Paragraph five </p> <p id="para_6" class="mytext"> Paragraph six </p>

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
JavaScript (no cache)
[].slice.call(
  document.getElementById("top").getElementsByClassName("mytext")
).forEach(
  function(element) {
    element.style.color = "#00ff00";
  });
[].slice.call(
  document.getElementById("top").getElementsByClassName("mytext")
).forEach(
  function(element) {
    element.style.textDecoration = "underline";
  });
[].slice.call(
  document.getElementById("top").getElementsByClassName("mytext")
).forEach(
  function(element) {
    element.style.backgroundColor = "#ffffff";
  });
pending…
jQuery (no cache)
jQuery('#top').find('.mytext').css('color', '#ff0000');
jQuery('#top').find('.mytext').css('text-decoration', 'underline');
jQuery('#top').find('.mytext').css('background-color', '#eeeeee');
pending…
JavaScript (cache)
cached.style.color = "#00ff00";
cached.style.textDecoration = "underline";
cached.style.backgroundColor = "#ffffff";
pending…
jQuery (cache)
$cached.css('color', '#00ff00');
$cached.css('text-decoration', 'underline');
$cached.css('background-color', '#ffffff');
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.

0 Comments

Paragraph one

Paragraph two

Paragraph three

Text in a span

Paragraph four

Paragraph five

Paragraph six