objectvsiframevsdiv

JavaScript performance comparison

Test case created by Sandeep Vemula

Preparation code

<object id="object" data="http://jsperf.com"></object>

<iframe id="iframe" src="http://jsperf.com"></iframe>

<div id="tmpl">
        <div type="text/html" id="tmpl1">
                <div>
                        <ul>
                         <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                         <li>Aliquam tincidunt mauris eu risus.</li>
                         <li>Vestibulum auctor dapibus neque.</li>
                </ul>
                <ol>
                         <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                         <li>Aliquam tincidunt mauris eu risus.</li>
                         <li>Vestibulum auctor dapibus neque.</li>
                </ol>
                </div>
        </div>
        <div type="text/html" id="tmpl2">
                <div>
                        <ul>
                         <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                         <li>Aliquam tincidunt mauris eu risus.</li>
                         <li>Vestibulum auctor dapibus neque.</li>
                </ul>
                <ol>
                         <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                         <li>Aliquam tincidunt mauris eu risus.</li>
                         <li>Vestibulum auctor dapibus neque.</li>
                </ol>
                </div>
        </div>
        <div type="text/html" id="tmpl3">
                <div>
                        <ul>
                         <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                         <li>Aliquam tincidunt mauris eu risus.</li>
                         <li>Vestibulum auctor dapibus neque.</li>
                </ul>
                <ol>
                         <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
                         <li>Aliquam tincidunt mauris eu risus.</li>
                         <li>Vestibulum auctor dapibus neque.</li>
                </ol>
                </div>
        </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
Benchmark.prototype.setup = function() {
      var object = document.getElementById("object").contentDocument;
      var iframe = document.getElementById("iframe").contentDocument;
      var div = document.getElementById("tmpl");
};
</script>

Preparation code output

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
object
object.getElementById("tests").innerHTML
pending…
iframe
iframe.getElementById("tests").innerHTML
pending…
directDOM
$(div).find("#tmpl1").html();
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. Here’s a list of current revisions for this page:

0 comments

Add a comment