Elegance stackoverflow question

JavaScript performance comparison

Test case created by Xotic750

Info

Testing of answers given to How to improve jQuery code?

http://stackoverflow.com/questions/16254484/how-to-improve-jquery-code

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  function empty(element) {
    "use strict";

    while (element.hasChildNodes()) {
      element.removeChild(element.lastChild);
    }
  }

  function addEvent(nodeList, type, callBack) {
    "use strict";

    var length = nodeList.length,
        i = 0;

    while (i < length) {
      nodeList[i].addEventListener(type, callBack, false);
      i += 1;
    }
  }

  function delEvent(nodeList, type) {
    "use strict";

    var length = nodeList.length,
        i = 0;

    while (i < length) {
      nodeList[i].removeEventListener(type);
      i += 1;
    }
  }
</script>
<div class="post_area2">
  <div class="wrap_area2 left">
    <textarea>
    </textarea>
  </div>
  <div class="word_c left">
  </div>
  <div class="submit left">
  </div>
</div>
<script>
Benchmark.prototype.teardown = function() {
    $('textarea').off();
    $('textarea').parent().siblings('div').eq(0).empty();
    $('textarea').parent().siblings('div').eq(1).empty();
   
    delEvent(document.getElementsByTagName("textarea"), "click");
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Method 1
$('textarea').click(function() {
  $($(this).parent().siblings('div')[0]).html('<span>140</span>');
  $($(this).parent().siblings('div')[1]).html('<span>Reply</span>');
});
pending…
Method 2
$('textarea').click(function() {
  var parentSiblings = $(this).parent().siblings('div');

  $(parentSiblings[0]).html('<span>140</span>');
  $(parentSiblings[1]).html('<span>Reply</span>');
});
pending…
Method 3
$('textarea').click(function() {
  var parentSiblings = $($(this).parent().siblings('div'));

  parentSiblings.eq(0).html('<span>140</span>');
  parentSiblings.eq(1).html('<span>Reply</span>');
});
pending…
Method 4
$('textarea').click(function() {
  $(this).parent().siblings('div').eq(0).html('<span>140</span>').end().eq(1).html('<span>Reply</span>');
});
pending…
Method 5
$('textarea').click(function() {
  $(this).parent().next().html('<span>140</span>').next().html('<span>Reply</span>');
});
pending…
Method 6
$('textarea').click(function() {
  var divContainer = $(this).parent().siblings('div');

  divContainer[0].innerHTML = '<span>140</span>';
  divContainer[1].innerHTML = '<span>Reply</span>';
});
pending…
Method 7
addEvent(document.getElementsByTagName("textarea"), "click", function(evt) {
  "use strict";

  var divContainer = evt.target.parentNode.parentNode.getElementsByTagName("div"),
      span;

  empty(divContainer[1]);
  span = document.createElement("span");
  span.textContent = "140";
  divContainer[1].appendChild(span);

  empty(divContainer[2]);
  span = document.createElement("span");
  span.textContent = "Reply";
  divContainer[2].appendChild(span);
});
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

Add a comment