querySelectorAll vs getElementsByTagName (v84)

Revision 84 of this benchmark created by my-password-is-password on

Preparation HTML

<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>

Test runner

Ready to run.

Testing in
TestOps/sec
querySelectorAll
var nodes = document.querySelectorAll('script')
ready
getElementsByTagName
var nodes = document.getElementsByTagName('script')
ready

Revisions

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