jQuery toghether JavaScript (v65)

Revision 65 of this benchmark created by Josue Ponce on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.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 = document.getElementById("top").getElementsByClassName("mytext");
  var $cached = $(parent_el).find('.mytext');
</script>

Test runner

Ready to run.

Testing in
TestOps/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 = "#000000";
  });
ready
jQuery (no cache)
$('#top').find('.mytext').css('color', '#ff0000');
$('#top').find('.mytext').css('text-decoration', 'underline');
$('#top').find('.mytext').css('background-color', '#eeeeee');
ready
JavaScript (cache)
cached[0].style.color = "#00ff00";
cached[0].style.textDecoration = "underline";
cached[0].style.backgroundColor = "#000000";
cached[1].style.color = "#00ff00";
cached[1].style.textDecoration = "underline";
cached[1].style.backgroundColor = "#000000";
cached[2].style.color = "#00ff00";
cached[2].style.textDecoration = "underline";
cached[2].style.backgroundColor = "#000000";
cached[3].style.color = "#00ff00";
cached[3].style.textDecoration = "underline";
cached[3].style.backgroundColor = "#000000";
ready
jQuery (cache)
$cached.css('color', '#ff0000');
$cached.css('text-decoration', 'underline');
$cached.css('background-color', '#eeeeee');
ready
JavaScript gettin element (cache)
var elements = document.getElementById("top").getElementsByClassName("mytext");
[].slice.call(elements).forEach(
  function(element) {
    element.style.color = "#00ff00";
  });
[].slice.call(elements).forEach(
  function(element) {
    element.style.textDecoration = "underline";
  });
[].slice.call(elements).forEach(
  function(element) {
    element.style.backgroundColor = "#000000";
  });
ready
jQuery getting element (cache)
var $elements = $("#top").find('.mytext');
$elements.css('color', '#ff0000');
$elements.css('text-decoration', 'underline');
$elements.css('background-color', '#eeeeee');
ready
JavaScript one array cicle
[].slice.call(
  document.getElementById("top").getElementsByClassName("mytext")
).forEach(
  function(element) {
    element.style.color = "#00ff00";
    element.style.textDecoration = "underline";
    element.style.backgroundColor = "#000000";
  });
ready
jQuery one call of css()
$cached.css({
  "color": "#ff0000",
  "text-decoration": "underline",
  "background-color": "#eeeeee"
});
ready
jQuery & JavaScript 1
$(cached).css('color', '#ff0000');
$(cached).css('background-color', '#eeeeee');
cached = $(cached)[0];
cached.style.textDecoration = "underline";
ready
jQuery & JavaScript 2
$(cached).css('color', '#ff0000');
cached = $(cached)[0];
$(cached).css('background-color', '#eeeeee');
cached.style.textDecoration = "underline";
ready

Revisions

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