sorting dom diff

JavaScript performance comparison

Test case created

Preparation code

  <ul>
    <li data-index="34">34</li>
    <li data-index="2">2</li>
    <li data-index="28">28</li>
    <li data-index="6">6</li>
    <li data-index="79">79</li>
    <li data-index="1">1</li>
  </ul>

Preparation code output

  • 34
  • 2
  • 28
  • 6
  • 79
  • 1

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
keune
 
var ul = document.getElementsByTagName('ul')[0],
    lis = ul.getElementsByTagName('li'),
    values = [],
    html = '';

for (var i=0; i<lis.length; i++) {
  values.push(lis[i].getAttribute('data-index'));
}

values = values.sort();
for (var i=0; i<values.length; i++) {
  var el = document.querySelectorAll('[data-index="' + values[i] + '"]')[0];
  html += el.outerHTML;
}
ul.innerHTML = html;
 pending…
elclanrs
 
var items = document.querySelectorAll('li'),
    ul = items[0].parentNode;

[].slice.call( items ).sort(function( a,b ) {
  return a.getAttribute('data-index') - b.getAttribute('data-index');
}).forEach(function( item ) {
  ul.appendChild( item );
});
 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