querySelectorAll vs getElementsByTagName

JavaScript performance comparison

Revision 84 of this test case created by my-password-is-password

Preparation code

<h1 xmlns="http://www.w3.org/1999/xhtml"><a href="https://github.com/eligrey/FileSaver.js">FileSaver.js</a> demo</h1>
<p xmlns="http://www.w3.org/1999/xhtml">
The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the W3C <code>saveAs()</code> <a href="http://www.w3.org/TR/file-writer-api/#the-filesaver-interface">FileSaver</a> interface, without contacting any servers.
</p>
<section xmlns="http://www.w3.org/1999/xhtml" id="image-demo">
        <h2>Saving an image</h2>
        <canvas class="input" id="canvas" width="500" height="300"></canvas>
        <form id="canvas-options">
                <label>Filename: <input type="text" class="filename" id="canvas-filename" placeholder="doodle" />.png</label>
                <input type="submit" value="Save" />
                <input type="button" id="canvas-clear" value="Clear" />
        </form>
</section>
<section xmlns="http://www.w3.org/1999/xhtml" id="text-demo">
        <h2>Saving text</h2>
        <textarea class="input" id="text" placeholder="Once upon a time..."></textarea>
        <form id="text-options">
                <label>Filename: <input type="text" class="filename" id="text-filename" placeholder="a plain document" />.txt</label>
                <input type="submit" value="Save" />
        </form>
</section>
<section xmlns="http://www.w3.org/1999/xhtml" id="html-demo">
        <h2>Saving rich text</h2>
        <div class="input" id="html" contenteditable="">
                <h3>Some example rich text</h3>
                <ul>
                        <li><del>Plain</del> <ins>Boring</ins> text.</li>
                        <li><em>Emphasized text!</em></li>
                        <li><strong>Strong text!</strong></li>
                        <li>
                                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="70" height="70">
                                        <circle cx="35" cy="35" r="35" fill="red"/>
                                        <text x="10" y="40">image</text>
                                </svg>
                        </li>
                        <li><a href="https://github.com/eligrey/FileSaver.js">A link.</a></li>
                </ul>
        </div>
        <form id="html-options">
                <label>Filename: <input type="text" class="filename" id="html-filename" placeholder="a rich document" />.xhtml</label>
                <input type="submit" value="Save" />
        </form>
</section>
<script xmlns="http://www.w3.org/1999/xhtml" type="application/ecmascript" async="" src="Blob.js"></script>
<script xmlns="http://www.w3.org/1999/xhtml" type="application/ecmascript" async="" src="canvas-toBlob.js"></script>
<script xmlns="http://www.w3.org/1999/xhtml" type="application/ecmascript" async="" src="FileSaver.js"></script>
<script xmlns="http://www.w3.org/1999/xhtml" type="application/ecmascript">
<![CDATA[
var _gaq = _gaq || [];
_gaq.push(["_setAccount", "UA-4364432-1"]);
_gaq.push(["_trackPageview"]);
]]>
</script>
<script xmlns="http://www.w3.org/1999/xhtml" type="application/ecmascript" async="" src="//www.google-analytics.com/ga.js"></script>
<script xmlns="http://www.w3.org/1999/xhtml" type="application/ecmascript" async="" src="demo.js"></script>
 

Preparation code output

FileSaver.js demo

The following examples demonstrate how it is possible to generate and save any type of data right in the browser using the W3C saveAs() FileSaver interface, without contacting any servers.

Saving an image

Saving text

Saving rich text

Some example rich text

  • Plain Boring text.
  • Emphasized text!
  • Strong text!
  • image
  • A link.

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
querySelectorAll
var nodes = document.querySelectorAll('script')
pending…
getElementsByTagName
var nodes = document.getElementsByTagName('script')
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