DOM Walk

JavaScript performance comparison

Revision 6 of this test case created by Cezary Tomczyk

Preparation code

<div id="post">
  <h1><a href="#">Some Title</a></h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas
    minima soluta a porro ullam vero libero quia facilis consequatur et fuga!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem
    explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius
    assumenda itaque nihil dolores. Facilis aliquam similique non.
  </p>
  <ul>
    <li><strong>Lorem ipsum</strong> dolor sit <a href="#">amet, <em>consectetuer</em></a> adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
  </ul>  
  <h2><a href="#">Some Subtitle</a></h2>
  <p>Some <em>emphasized</em> text</p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas
    minima soluta a porro ullam vero libero quia facilis consequatur et fuga!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem
    explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius
    assumenda itaque nihil dolores. Facilis aliquam similique non.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas
    minima soluta a porro ullam vero libero quia facilis consequatur et fuga!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem
    explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius
    assumenda itaque nihil dolores. Facilis aliquam similique non.
  </p>
  <ul>
    <li><strong>Lorem ipsum</strong> dolor sit <a href="#">amet, <em>consectetuer</em></a> adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
  </ul>
  <h2><a href="#">Another Subtitle</a></h2>
  <ul>
    <li><strong>Lorem ipsum</strong> dolor sit <a href="#">amet, <em>consectetuer</em></a> adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
  </ul>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas
    minima soluta a porro ullam vero libero quia facilis consequatur et fuga!
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem
    explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius
    assumenda itaque nihil dolores. Facilis aliquam similique non.
  </p>
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var post = document.getElementById('post');
  
  var A = [],
    B = [];
  
  var fn = function(node) {
    if (3 == node.nodeType) {
      B.push(node.nodeValue);
    }
  };
  
  function walk(node, iter) {
    iter(node);
    node = node.firstChild;
    while (node) {
      walk(node, iter);
      node = node.nextSibling;
    }
  }
  
  function walkr(node, iter) {
    function _iter(node) {
      var ch = node.childNodes;
      iter(node);
      if (ch.length > 0) {
        _sib(node.firstChild);
      }
    }
  
    function _sib(node) {
      var sib = node.nextSibling;
      _iter(node);
      if (sib) _sib(sib);
    }
    _iter(node);
  }

};
</script>

Preparation code output

<div id="post"> <h1><a href="#">Some Title</a></h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas minima soluta a porro ullam vero libero quia facilis consequatur et fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius assumenda itaque nihil dolores. Facilis aliquam similique non. </p> <ul> <li><strong>Lorem ipsum</strong> dolor sit <a href="#">amet, <em>consectetuer</em></a> adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> <h2><a href="#">Some Subtitle</a></h2> <p>Some <em>emphasized</em> text</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas minima soluta a porro ullam vero libero quia facilis consequatur et fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius assumenda itaque nihil dolores. Facilis aliquam similique non. </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas minima soluta a porro ullam vero libero quia facilis consequatur et fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius assumenda itaque nihil dolores. Facilis aliquam similique non. </p> <ul> <li><strong>Lorem ipsum</strong> dolor sit <a href="#">amet, <em>consectetuer</em></a> adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> <h2><a href="#">Another Subtitle</a></h2> <ul> <li><strong>Lorem ipsum</strong> dolor sit <a href="#">amet, <em>consectetuer</em></a> adipiscing elit.</li> <li>Aliquam tincidunt mauris eu risus.</li> <li>Vestibulum auctor dapibus neque.</li> </ul> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas minima soluta a porro ullam vero libero quia facilis consequatur et fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius assumenda itaque nihil dolores. Facilis aliquam similique non. </p> </div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Using While (walk)
walk(post, fn);
pending…
Without While (walkr)
walkr(post, function(node) {
  if (3 == node.nodeType) {
    A.push(node.nodeValue);
  }
});
pending…

Compare results of other browsers

Revisions

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

0 Comments

Some Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas minima soluta a porro ullam vero libero quia facilis consequatur et fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius assumenda itaque nihil dolores. Facilis aliquam similique non.

Some Subtitle

Some emphasized text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas minima soluta a porro ullam vero libero quia facilis consequatur et fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius assumenda itaque nihil dolores. Facilis aliquam similique non.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas minima soluta a porro ullam vero libero quia facilis consequatur et fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius assumenda itaque nihil dolores. Facilis aliquam similique non.

Another Subtitle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam voluptates expedita tempore molestias beatae ratione eveniet voluptas minima soluta a porro ullam vero libero quia facilis consequatur et fuga! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro neque fuga ut similique alias ex sapiente tempora et facere quibusdam quidem explicabo laudantium voluptatibus voluptates earum rerum obcaecati esse reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse distinctio a ipsum dolore iusto quaerat error incidunt amet sunt ut non eius assumenda itaque nihil dolores. Facilis aliquam similique non.