atomicscan

JavaScript performance comparison

Test case created by Jakob

Preparation code

<!-- Define a molecule -->
<div id="my-cool-molecule" data-atomic="molecules/carouselwithbuttons" class="ATOMIC">
  <!-- use data-atomic-role with data-atomic-for to identify sub components -->
  <ul data-atomic-role="carousel" data-atomic-for="my-cool-molecule" class="ATOMIC">
    <li>
      one
    </li>
    <li>
      two
    </li>
    <li>
      three
    </li>
  </ul>
  <a href="#" data-atomic-role="next" data-atomic-for="my-cool-molecule" class="ATOMIC">Next</a>
  <a href="#" data-atomic-role="previous" data-atomic-for="my-cool-molecule" class="ATOMIC">Previous</a>
</div>
<!-- What we think this will do==========================T he AMI (Atomic Magic
Interface) is an HTML-only way of creating Atomic Elements and Atomic Molecules.
Most often used for Molecules, AMI works well with well- established UI patterns
and reusable templates. Your first question is unavoidable. What's with "ATOMIC"?
If you need to support IE7, you _must_ use this. Otherwise, your performance is going
to suck. By using getElementsByClassName(), we can only act on relevant nodes in
our parsing. How important is this really? In testing, it's about a 10x improvement.
To keep things simple, the Elements that make up a molecule are identified with the
attributes data-atomic-role and data-atomic-for. -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
Benchmark.prototype.setup = function() {
    function _selectIESeven(type, value) {
      var nodes = [];
      var tmp = null;
      var i = document.all.length;
      while (i--) {
        tmp = document.all[i];
        if (type === 'atomic' && tmp.getAttribute('data-atomic') && tmp.getAttribute('data-atomic').length > 0) {
          nodes.push(document.all[i]);
        } else if (type === 'for' && tmp.getAttribute('data-atomic-for') && value === document.all[i].getAttribute('data-atomic-for')) {
          nodes.push(document.all[i]);
        }
      }
      return nodes;
    }
   
    function _selectAllOthers(type, value) {
      var nodes = [];
      if (type === 'atomic') {
        nodes = document.querySelectorAll('*[data-atomic]');
      } else if (type === 'for') {
        nodes = document.querySelectorAll('*[data-atomic-for="' + value + '"]');
      }
      return nodes;
    }
   
    function _controlSelect(type, value) {
      var nodes = [];
      if (type === 'atomic') {
        nodes = $('*[data-atomic]');
      } else if (type === 'for') {
        nodes = $('*[data-atomic-for="' + value + '"]');
      }
      return nodes;
    }
   
    function parse() {
      var count = 0;
      var registry = {};
      var nodes = (document.querySelectorAll) ? _selectAllOthers('atomic') : _selectIESeven('atomic');
      var children = [];
      for (var i = 0, len = nodes.length; i < len; i++) {
        count++;
        children = [];
        if (nodes[i].id) {
          children = (document.querySelectorAll) ? _selectAllOthers('for', nodes[i].id) : _selectIESeven('for', nodes[i].id);
        }
        nodes[i].setAttribute('data-atomic-registry', count);
   
        registry[count] = {
          node: nodes[i],
          children: children
        };
      }
      return registry;
    }
   
    function parseControl() {
      var count = 0;
      var registry = {};
      var nodes = _controlSelect('atomic');
      var children = [];
      for (var i = 0, len = nodes.length; i < len; i++) {
        count++;
        children = [];
        if (nodes[i].id) {
          children = _controlSelect('for', nodes[i].id);
        }
        nodes[i].setAttribute('data-atomic-registry', count);
   
        registry[count] = {
          node: nodes[i],
          children: children
        };
      }
      return registry;
    }
};
</script>

Preparation code output

  • one
  • two
  • three
Next Previous

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
control (jquery)
var results = parseControl();

if (!results[1]) {
  throw new Error("No results");
}
if (results[2]) {
  throw new Error("Too many results");
}
if (results[1].children.length !== 3) {
  throw new Error("Incorrect children (wanted 3): " + results[1].children.length);
}
pending…
parse
var results = parse();

if (!results[1]) {
  throw new Error("No results");
}
if (results[2]) {
  throw new Error("Too many results");
}
if (results[1].children.length !== 3) {
  throw new Error("Incorrect children (wanted 3): " + results[1].children.length);
}
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