context searching

Benchmark created by context searching vs dom on

Preparation HTML

<ul id="foo">
  <li id="foo0">test</li>
  <li id="foo1">test</li>
  <li id="foo2">test</li>
  <li id="foo3">test</li>
  <li id="foo4">test</li>
  <li id="foo5">test</li>
  <li id="foo6">test</li>
  <li id="foo7">test</li>
  <li id="foo8">test</li>
  <li id="foo9">test</li>
</ul>

<ul id="bar">
  <li id-"bar0">test</li>
  <li id="bar1">test</li>
  <li id="bar2">test</li>
  <li id="bar3">test</li>
  <li id="bar4">test</li>
  <li id="bar5">test</li>
  <li id="bar6">test</li>
  <li id="bar7">test</li>
  <li id="bar8">test</li>
  <li id="bar9">test</li>
</ul>

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
var foo0 = document.getElementById('foo0'),
    foo1 = document.getElementById('foo1'),
    foo2 = document.getElementById('foo2'),
    foo3 = document.getElementById('foo3'),
    foo4 = document.getElementById('foo4'),
    foo5 = document.getElementById('foo5'),
    foo6 = document.getElementById('foo6'),
    foo7 = document.getElementById('foo7'),
    foo8 = document.getElementById('foo8'),
    foo9 = document.getElementById('foo9'),
    bar0 = document.getElementById('bar0'),
    bar1 = document.getElementById('bar1'),
    bar2 = document.getElementById('bar2'),
    bar3 = document.getElementById('bar3'),
    bar4 = document.getElementById('bar4'),
    bar5 = document.getElementById('bar5'),
    bar6 = document.getElementById('bar6'),
    bar7 = document.getElementById('bar7'),
    bar8 = document.getElementById('bar8'),
    bar9 = document.getElementById('bar9');
 
ready
children
var foo = document.getElementById('foo'),
    bar = document.getElementById('bar'),
    foo0 = foo.children[0],
    foo1 = foo.children[1],
    foo2 = foo.children[2],
    foo3 = foo.children[3],
    foo4 = foo.children[4],
    foo5 = foo.children[5],
    foo6 = foo.children[6],
    foo7 = foo.children[7],
    foo8 = foo.children[8],
    foo9 = foo.children[9],
    bar0 = bar.children[0],
    bar1 = bar.children[1],
    bar2 = bar.children[2],
    bar3 = bar.children[3],
    bar4 = bar.children[4],
    bar5 = bar.children[5],
    bar6 = bar.children[6],
    bar7 = bar.children[7],
    bar8 = bar.children[8],
    bar9 = bar.children[9];
ready
getElementsByTagName
var foo = document.getElementById('foo'),
    bar = document.getElementById('bar'),
    foo0 = foo.getElementsByTagName('li')[0],
    foo1 = foo.getElementsByTagName('li')[1],
    foo2 = foo.getElementsByTagName('li')[2],
    foo3 = foo.getElementsByTagName('li')[3],
    foo4 = foo.getElementsByTagName('li')[4],
    foo5 = foo.getElementsByTagName('li')[5],
    foo6 = foo.getElementsByTagName('li')[6],
    foo7 = foo.getElementsByTagName('li')[7],
    foo8 = foo.getElementsByTagName('li')[8],
    foo9 = foo.getElementsByTagName('li')[9],
    bar0 = bar.getElementsByTagName('li')[0],
    bar1 = bar.getElementsByTagName('li')[1],
    bar2 = bar.getElementsByTagName('li')[2],
    bar3 = bar.getElementsByTagName('li')[3],
    bar4 = bar.getElementsByTagName('li')[4],
    bar5 = bar.getElementsByTagName('li')[5],
    bar6 = bar.getElementsByTagName('li')[6],
    bar7 = bar.getElementsByTagName('li')[7],
    bar8 = bar.getElementsByTagName('li')[8],
    bar9 = bar.getElementsByTagName('li')[9];
ready

Revisions

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

  • Revision 1: published by context searching vs dom on