getElementsByClassName VS querySelectorAll

JavaScript performance comparison

Revision 7 of this test case created

Preparation code

<div id="pageHeader"> 
                <div class="serviceName">
                        <div class="interia"><a href="http://www.interia.pl">INTERIA.PL</a></div>
                        <div class="service teletydzien"><h1><a href="/"> teletydzien</a></h1></div>
                        <div class="searchHeader" id="objectSearch" style="top: 79px; right: 0px; ">
                                <h3>Wyszukiwarka serwisowa</h3>
                                <form action="/szukaj/" method="get" name="srch">
                                        <input class="searchText" type="text" name="q" value="Szukaj w serwisie TeleTydzień" onfocus="if(this.value=='Szukaj w serwisie TeleTydzień')this.value=''" onblur="if(this.value=='')this.value='Szukaj w serwisie TeleTydzień'" style="border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(80, 157, 30); border-right-color: rgb(80, 157, 30); border-bottom-color: rgb(80, 157, 30); border-left-color: rgb(80, 157, 30); border-image: initial; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(212, 213, 109); background-position: initial initial; background-repeat: initial initial; ">       
                                        <input class="searchButton" type="submit" name="szukaj" id="searchSubmit" alt="Szukaj" value="" style="background-image: url(http://img.interia.pl/reklamy/brending/searchButton.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-position: initial initial; background-repeat: no-repeat no-repeat; ">
                                </form>
                        </div>
                <div id="stylBrendSsiadddiv" style="height: 120px; position: absolute; padding-top: 20px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(255, 255, 255); z-index: 1000; top: 0px; left: -20px; width: 950px; background-position: initial initial; background-repeat: initial initial; "><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" id="stylBrendSsi" width="950" height="120" style="z-index:1000;display: block;"><param name="allowScriptAccess" value="always"><param name="movie" value="http://img.interia.pl/reklamy/brending/fakty_header_120.swf?undefined"><param name="quality" value="high"><param name="wmode" value="opaque"><param name="bgcolor" value="FFffff"><param name="flashvars" value="player=http://img.interia.pl/reklamy/brending/player_3.swf&amp;flv=http://k.hub.com.pl/reklama_video/branding_ssi/fakty/20111012/test.flv&amp;videoSkin=http://img.interia.pl/reklamy/brending/skin_styldefault.swf&amp;videowidth=300&amp;videoheight=178&amp;menuIs=1&amp;hideMenu=0&amp;muteDisabled=0&amp;autoStart=1&amp;autoLoop=1&amp;setAuto=1"><embed name="stylBrendSsi" src="http://img.interia.pl/reklamy/brending/fakty_header_120.swf?undefined" quality="high" wmode="opaque" bgcolor="FFffff" width="950" height="120" type="application/x-shockwave-flash" flashvars="player=http://img.interia.pl/reklamy/brending/player_3.swf&amp;flv=http://k.hub.com.pl/reklama_video/branding_ssi/fakty/20111012/test.flv&amp;videoSkin=http://img.interia.pl/reklamy/brending/skin_styldefault.swf&amp;videowidth=300&amp;videoheight=178&amp;menuIs=1&amp;hideMenu=0&amp;muteDisabled=0&amp;autoStart=1&amp;autoLoop=1&amp;setAuto=1" swliveconnect="true" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></object><div id="headerLinks" style="position: absolute; z-index: 1000; left: 25px; bottom: 11px; "><a href="http://interia.pl"><img src="http://img.interia.pl/reklamy/brending/logo_interia.png" alt=""></a><a style="margin-left: 8px" href="/"><img src="http://img.interia.pl/reklamy/brending/logo_fakty.png" alt=""></a></div></div></div>
        </div>

Preparation code output

Test runner

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

Java applet disabled.

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