data behaviors - jquery vs querySelectorAll (v3)

Revision 3 of this benchmark created on

Description

An update to triggering JS functions based on data-behaviors to use querySelectorAll to hunt through the DOM rather than jQuery.

I wrote about this method in .Net in October 2012 (http://www.creativebloq.com/javascript/get-your-javascript-order-4135704) and stole the idea from Adam Berlin's "Elemental JS" (https://github.com/elementaljs/elementaljs). These tests are inspired by Roberto Dip's "Essential JS" (https://github.com/roperzh/essential.js).

An update to my article will be published soon on http://opticalcortex.com/

First two tests are run by looking at the DOM. Second two tests are the same function, where a jQuery object of HTML is used. Both use the same markup.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div>
  <p>Test</p>
  <p data-behavior="test1">Test</p>
  <p>Test</p>
  <p data-behavior="test1 test_2">Test</p>
  <p>Test</p>
  <p data-behavior="test1">Test</p>
  <p>Test</p>
  <p data-behavior="test1 test_2">Test</p>
  <p>Test</p>
  <p data-behavior="test1">Test</p>
  <p>Test</p>
  <p data-behavior="test1 test_2">Test</p>
  <p>Test</p>
  <p data-behavior="test1">Test</p>
  <p>Test</p>
  <p data-behavior="test1 test_2">Test</p>
</div>
<ul>
  <li>Test</li>
  <li data-behavior="test1">Test</li>
  <li>Test</li>
  <li data-behavior="test1 test2">Test</li>
  <li>Test</li>
  <li data-behavior="test1">Test</li>
  <li>Test</li>
  <li data-behavior="test1 test2">Test</li>
  <li>Test</li>
  <li data-behavior="test1">Test</li>
  <li>Test</li>
  <li data-behavior="test1 test2">Test</li>
  <li>Test</li>
  <li data-behavior="test1">Test</li>
  <li>Test</li>
  <li data-behavior="test1 test2">Test</li>
</ul>
<div>
  <p>Test</p>
  <p data-behavior="test1">Test</p>
  <p>Test</p>
  <p data-behavior="test1 test_2">Test</p>
  <p>Test</p>
  <p data-behavior="test1">Test</p>
  <p>Test</p>
  <p data-behavior="test1 test_2">Test</p>
  <p>Test</p>
  <p data-behavior="test1">Test</p>
  <p>Test</p>
  <p data-behavior="test1 test_2">Test</p>
  <p>Test</p>
  <p data-behavior="test1">Test</p>
  <p>Test</p>
  <p data-behavior="test1 test_2">Test</p>
</div>
<ul>
  <li>Test</li>
  <li data-behavior="test1">Test</li>
  <li>Test</li>
  <li data-behavior="test1 test2">Test</li>
  <li>Test</li>
  <li data-behavior="test1">Test</li>
  <li>Test</li>
  <li data-behavior="test1 test2">Test</li>
  <li>Test</li>
  <li data-behavior="test1">Test</li>
  <li>Test</li>
  <li data-behavior="test1 test2">Test</li>
  <li>Test</li>
  <li data-behavior="test1">Test</li>
  <li>Test</li>
  <li data-behavior="test1 test2">Test</li>
</ul>

Setup

var a17 = {
    };
    a17.Behaviors = {
    }
    a17.str = "";
    a17.Behaviors.test1 = function(container){
      a17.str += container.tagName + "(test1) ";
    };
    a17.Behaviors.test2 = function(container){
      a17.str += container.tagName + "(test2) ";
    };

Test runner

Ready to run.

Testing in
TestOps/sec
querySelectorAll_tryCatch
function querySelectorAll_tryCatch() {
  var context = $(document);
  var result = [];
  for (var ci = 0, cl = context.length; ci < cl; ci++) {
    var all = context[ci].querySelectorAll("[data-behavior]");
    var i = -1;
    while (all[++i]) {
      var currentElement = all[i];
      var behaviors = currentElement.getAttribute("data-behavior");
      var splitted_behaviors = behaviors.split(" ");
      for (var j = 0, k = splitted_behaviors.length; j < k; j++) {
        try {
          var BehaviorClass = a17.Behaviors[splitted_behaviors[j]];
          var initializedBehavior = new BehaviorClass(currentElement);
        } catch(e){
          // No Operation
        }
      }
    }
  }
  return result;
}

querySelectorAll_tryCatch();
ready
querySelectorAll_testApply
function querySelectorAll_testApply() {
  var context = $(document);
  var result = [];
  for (var ci = 0, cl = context.length; ci < cl; ci++) {
    var all = context[ci].querySelectorAll("[data-behavior]");
    var i = -1;
    while (all[++i]) {
      var currentElement = all[i];
      var behaviors = currentElement.getAttribute("data-behavior");
      var splitted_behaviors = behaviors.split(" ");
      for (var j = 0, k = splitted_behaviors.length; j < k; j++) {
        var thisBehavior = a17.Behaviors[splitted_behaviors[j]];
        if(typeof thisBehavior !== "undefined") {
          thisBehavior.apply(currentElement,[currentElement]);
        }
      }
    }
  }
}

querySelectorAll_testApply();
ready
querySelectorAll_testCall
function querySelectorAll_testCall() {
  var context = $(document);
  var result = [];
  for (var ci = 0, cl = context.length; ci < cl; ci++) {
    var all = context[ci].querySelectorAll("[data-behavior]");
    var i = -1;
    while (all[++i]) {
      var currentElement = all[i];
      var behaviors = currentElement.getAttribute("data-behavior");
      var splitted_behaviors = behaviors.split(" ");
      for (var j = 0, k = splitted_behaviors.length; j < k; j++) {
        var thisBehavior = a17.Behaviors[splitted_behaviors[j]];
        if(typeof thisBehavior !== "undefined") {
          thisBehavior.call(currentElement, [currentElement]);
        }
      }
    }
  }
}

querySelectorAll_testCall();
ready

Revisions

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