Benchmark: getElementById + querySelector vs querySelector

HTML Preparation code:
<body class="lang_pl">
		<div id="tutorials">
			<div class="avatar"></div>
			<div class="bubble">
				<div class="container"></div>
				<div class="controlls"></div>
			</div>
		</div>
		<div id=loading>
			<span id="_t1">...</span>
			<div class="progressbar"><div class="bar"></div></div>
			<div class="progressInfo"></div><div class="helptxt" id="_t2">...</div>
		</div>
		<div id=msg></div>

        <div id=staminashop>
			<div class=a1></div>
			<div style="text-align:center;" class=a2>
				<div id="_t3newWrapper"><b id="_t3new"></b></div>
				<span><b id="_t3"></b></span>
				<div class="stamina_pay_options">
					<div class="st_pay_wrapper"><span id="st_pay_1"></span><button onclick="return staminaShopOptionChoose(1)" class="bal_pay_decrease active"></button><button onclick="return staminaShopOptionChoose(1, true)"  class="bal_pay_increase active"></button></div>
					<div class="st_pay_wrapper"><span id="st_pay_2"></span><button onclick="return staminaShopOptionChoose(7)" class="bal_pay_decrease active"></button><button onclick="return staminaShopOptionChoose(7, true)"  class="bal_pay_increase active"></button></div>
					<div class="st_pay_wrapper"><span id="st_pay_8"></span><button onclick="return staminaShopOptionChoose(30)" class="bal_pay_decrease active"></button><button onclick="return staminaShopOptionChoose(30, true)" class="bal_pay_increase active"></button></div>
				</div>
			</div>
			<!--<div class=a3><button id=p_pay class=bal_pay></button><button id=p_cancel onclick="return hideStaminaShop()" class=bal_cancel></button></div>-->
			<div class=a3><button id=p_cancel onclick="return hideStaminaShop()" class=bal_cancel></button></div>
		</div>

        <div id="upgradeclandepoalert">
            <div class=a1></div>
            <div style="text-align:center;" class=a2>
                <span><b id="upgrade_alert_str"></b></span>
                <div class="clan_depo_pay_options">
                    <div class="clan_depo_pay_wrapper"><span id="clan_depo_pay_1"></span><button id=clan_depo_opt_1 onclick="_g('clan&a=depo&op=upgrade&pay=z')" class="bal_pay active"></button></div>
                    <div class="clan_depo_pay_wrapper"><span id="clan_depo_pay_2"></span><button id=clan_depo_opt_2 onclick="_g('clan&a=depo&op=upgrade&pay=s')" class="bal_pay active"></button></div>
                </div>
            </div>
            <div class=a3><button id=clan_depo_cancel onclick="return hideUpgradeClanDepoAlert()" class=bal_cancel></button></div>
        </div>


		<div id=alert>
			<div class=a1></div>
			<div class=a2></div>
			<div class=a3><button id=a_ok class=bal_ok></button><button id=a_cancel class=bal_cancel></button></div>
		</div>

		<div id="captcha"></div>

		<div id="poll"></div>

		<div id="en_wnd" class="en-window-wrapper">
			<div class="header-wrapper">
				<div class="right-border"></div>
				<div class="left-border"></div>
				<div class="content">
					<div class="header-text-wrapper" id="enwnd_header_txt"></div>
				</div>
				<div class="close-button"></div>
			</div>
			<div class="content-wrapper">
				<div class="background-wrapper">
					<div class="border top"></div>
					<div class="border bottom"></div>
					<div class="border left"></div>
					<div class="border right"></div>
					<div class="corner top-left"></div>
					<div class="corner top-right"></div>
					<div class="corner bottom-left"></div>
					<div class="corner bottom-right"></div>
					<div class="background"></div>
				</div>
				<div class="content-inner" id="enwnd_content">
					<div class="registration-wrapper">
						<div class="header"><div class="mark-outer"><div class="mark"></div></div></div>
						<div class="short-info">
						</div>
						<div class="main-container">
						</div>
					</div>
				</div>
			</div>
		</div>


		<div id=imgload>...</div>

		<div id="quest-log-window">
				<div class="quest-log-header"></div>
				<div class="quest-log-close-but"></div>
				<div class="quest-log-content">
					<div class="quest-log-scroll questlist"></div>
				</div>
			</div>
		</div>

		<div id=dlgwin><div class=w1><div id=dlgtitle></div><div class=closebut onclick='$("#dlgwin").fadeOut("fast"); g.lock.remove("dialogalert"); g.qlogVisible = false;' rollover=22></div>
				<div class=w2></div></div></div>
		<div id=dropmenu><h3></h3><span id="_t4"></span><br>
			<button id="_t5" onclick="moveItemSafe($('#dropmenu').attr('iid'), 'st=-1'); $('#dropmenu').fadeOut()">...</button>
			<button id="_t6" onclick="moveItemSafe($('#dropmenu').attr('iid'), 'st=-2'); $('#dropmenu').fadeOut()">...</button>
			<button id="_t7" onclick='$("#dropmenu").fadeOut()'>...</button>
			<br><small id="_t8">...</small></div>

		<div id=config>
			<div class="conf-title"></div>
            <div id=cfg_options>
                <div opt=1 class="server-opt" id="opt1">...</div>
                <div opt=6 class="server-opt" id="opt6">...</div>
                <div opt=2 class="server-opt" id="opt2">...</div>
                <div opt=3 class="server-opt" id="opt3">...</div>
                <div opt=5 class="server-opt" id="opt5">...</div>
                <div opt=14 class="server-opt" id="opt14">...</div>
                <div opt=4 class="server-opt" id="opt4">...</div>
                <div opt=7 class="server-opt" id="opt7">...</div>
                <div opt=8 class="server-opt" id="opt8">...</div>
                <div opt=9 class="server-opt" id="opt9">...</div>
                <div opt=10 class="server-opt" id="opt10">...</div>
                <div opt=12 class="server-opt" id="opt12">...</div>
                <div opt=13 class="server-opt" id="opt13">...</div>
                <!--<div opt=150 class="local-opt" id="opt150">...</div>-->
                <div opt=16 class="server-opt" id="opt16">...</div>
            </div>
			<button class=changeClient onclick='changeClient()'></button>
			<div class="right-save-buts"><button class=save rollover=20 onclick='config_save()'></button><button class=cancel rollover=20 onclick='config_cancel()'></button></div>
		</div>
		<div id=match-details-wnd>
			<div class="match-details-title"></div>
			<!--<div id="match-details-title-txt"></div>-->
			<div id=match-details-txt></div>
			<div class=close-match-details-wrapper>
				<div class=close-match-details onclick="g.matchmaking.toggleDetailsWnd()"></div>
			</div>

		</div>

		<div id=loots>
            <div id=loots_header_label></div>
			<!--<div id=loots_l></div><div id=loots_r></div>-->
			<center><table><tr>
				</table></center>
			<button id=loots_button onclick=sendLoots(1,false)></button>
			<div id=loots_counter>-</div>
			<div id=loots_bag></div>
			<!--<video id="chest-video">-->
				<!--<source src="img/chest.m4v" type="video/x-m4v">-->
			<!--</video>-->
		</div>

		<!--<video id="chest-video">-->
		<!--<source src="video/chest.m4v" type="video/x-m4v">-->
		<!--</video>-->

		<div id=centerbox2>
			<div id="ni-promo"><div class="ni-button" onclick="changeClient()"></div></div>
			<div id="hieronim_button" onclick="shop_close(); _g('creditshop&npc=68689')"></div>
			<div id="lehim_button" onclick="shop_close(); showStaminaShop();"></div>
			<span id=corners>
				<img class="lt-hor" src="img/lt-hor.png">
				<img class="lt-ver" src="img/lt-ver.png">
				<img class="ld-hor" src="img/ld-hor.png">
				<img class="ld-ver" src="img/ld-ver.png">
				<img class="rt-hor" src="img/rt-hor.png">
				<img class="rt-ver" src="img/rt-ver.png">
				<img class="rd-hor" src="img/rd-hor.png">
				<img class="rd-ver" src="img/rd-ver.png">
				<img class="border-u" src="img/border-u.png">
				<img class="border-l" src="img/border-l.png">
				<img class="border-r" src="img/border-r.png">
				<img class="border-d" src="img/border-d.png">
			</span>
			<img src="img/le-orn1.gif" id=leorn1><img src="img/le-orn2.gif" id=leorn2>
			<img id=tutorial>
		</div>
		<div id=centerbox>
			<div id=base>
				<div id="bground">
					<div id="stasis-overlay">
						<dev class="stasis-overlay__caption">
							<div class="stasis-overlay__title" data-trans="stasis"></div>
							<div class="stasis-overlay__text">
								<div class="stasis-overlay__text-inner"></div>
								<div class="stasis-overlay__time"></div>
							</div>
						</dev>
					</div>
				</div>
				<div id=ground onmousedown="return false">
					<div id=target></div>
					<div id="bubbledialog">
						<div class="bg_layer">
							<div class="top_frame"></div>
							<div class="left_frame"></div>
							<div class="right_frame"></div>
							<div class="bottom_frame"></div>
						</div>
						<div class="content_layer">
							<div class="inner">
								<div class="container">

								</div>
							</div>
						</div>
					</div>
				</div></div>
			<div id="itemWaitBox"><div class="items-container"></div><div class="hoverbutton"></div></div>
			<div id=panel>
				<h1 id=nick></h1>
				<div id=new_event_calendar style="display: none;" tip='' onclick="_g('rewards_calendar&action=show');"></div>
				<div id="skillSwitch" onclick="g.skills.changeSet();" tip="..."></div>
				<div id=buttons>
					<div id=b_quests tip='...' onclick='g.questLog.manageVisibility()'></div>
					<div id=b_clans tip='...' onclick='clan_click()'></div>
					<!--<div id=b_pvp tip='...' rollover=22 onclick='hero.togglePvp()'></div>-->
					<div id=b_recipes tip='...' onclick='_g("craft&a=list")'></div>
					<div id=b_config tip='...' onclick="config_show()"></div>
					<div id=b_map tip='...' onclick='map.showMini()'></div>
					<div id=b_skills tip='...' onclick='g.skills.show()'></div>
					<div id=b_friends tip='...' onclick='_g("friends&a=show")'></div>
					<!--<div id=b_addons tip='...' onclick="extManager.task('add_list')"></div>-->
					<div id=b_matchmaking tip='...' onclick="g.matchmaking.show()"></div>
				</div>
				<div id=b_addons class=b_buttons tip='...' onclick="extManager.task('add_list')"></div>
				<div id=b_news class=b_buttons tip='...' onclick="showNews()"></div>
				<div id=b_help class=b_buttons tip='...' onclick="showHelp()"></div>
				<div id="b_pvp" onclick="hero.togglePvp()" tip="..."></div>
				<div id=bagc><div id=bag></div></div><div id=hlbag></div>
			</div>
			<!--<div id=premiumbut onclick="showPremiumPanel()"></div>-->
			<div id=premiumbut onclick="g.prePremium.showPrePremiumPanel()"></div>
			<!--<div id=helpbut onclick="showHelp()"></div>-->
			<div id=logoutbut onclick='logout()'></div>

			<div id=stats></div><div id=base3></div><div id=gold></div>
			<div id=exp1></div><div id=exp2></div> <div id=life1></div><div id=life2></div>
			<div id=pvpmode></div><div id=bottombar><div id=bottxt></div><input spellcheck="true" id=inpchat maxlength=200 autocomplete="off"></div><div id=botloc></div><div id=lagmeter tip='--ms'></div>
			<!--<div id="event_calendar_switch"></div>-->
			<div id="pvpStatMainBox"><div id="pvpIndicatorsListButton" onclick="_g('conquer')" tip=""></div><div class="bgLayer"></div><div id="pvpStatContainer"><div class="bar fall"><div class="indicator"></div></div><div class="bar raise"><div class="indicator"></div></div></div></div>
			<div id=bchat onclick="toggleChat()" tip="..."></div>
			<div id=chat>
				<div style="position:relative">
					<!--<div id="chatMoveHandler">cm</div>!-->
				</div>
				<div id=chattabs><s id=chb0></s><s id=chb1></s><s id=chb2></s><s id=chb3></s></div>
				<div id=chattxt></div>
			</div>
			<center id=chathorror>
				<h2></h2><h3 id="_t9">...</h3>
				<input>
				<div style='margin-bottom:160px'></div>
				<button id="_t10" onclick=chatSendBad()>...</button>
				<button id="_t11" onclick=$('#chathorror').fadeOut()>...</button>
				<br><span id="_t12"></span>
			</center>
			<div id=youtube>
				<button id="_t13" onclick=hideMovie()></button> <button id="_t14" onclick=minimizeMovie()></button>
				<center></center></div>

			<div id=bookmarks>
				<div id=warn tip='' onclick="toggleConsole()"></div>
				<div id=bm_party tip='' onclick="partyToggle()"></div>
				<div id=bm_movie tip='' onclick="maximizeMovie()"></div>
				<div id=bm_register tip='' onclick="ingameRegistration.show()"></div>
			</div>

			<div id="pre-captcha"></div>

			<div id=console><div id=contxt>
					Margonem console.<br>
				</div><input id=conin autocomplete="off"></div>

			<div id=party><p></p><img src="img/party-bottom.png"></div>

			<div id=dazed><div><img src="/img/dazed3.png"><br><span id=dazeleft></span></div></div>
			<div id=battle>
				<div tip="" onclick="battle_surrender();" id="surrenderBattleButton">Poddaj się</div>
				<div  tip="" onclick="if (ansgame.check()) return false; _g('fight&a=f'); $(this).fadeOut(); g.battle.nobut = true;" id="autobattleButton">Auto</div><div id=battlepanelback></div><div id=battlelog></div>
				<div id=battlepanel>
					<b id=battlemana>0</b><b id=battleenergy>0</b>
					<b id=battletimer>-</b>
					<div id=battlehelp onclick="showDialog((_l() == 'en' ? 'en/' : '') + 'help-title.png', $('#h_battle').html())"></div>
					<div id=battleclose onclick=canLeave()></div>
					<small style='font-size:9px'></small>
				</div>
				<div class="border-b"></div>
			</div>

			<div id=dialog>
				<div class="borders"></div>
				<div id=dlgin>
					<div class="message"></div>
					<div class="replies" id="replies"></div>
				</div>
			</div>

			<div id=minimap>
				<div id=inmap></div><div id=inmap2wrapper><div id="inmap2"><img src=""><div id=hlmap></div><div id=maptip></div></div></div>
				<div id=mappanel>
					<ul class=boxhover>
						<!--<li onclick='$("#inmap2wrapper").fadeIn("fast"); setTimeout(function () {map.highlightMarker()}, 300)'>-->
						<li onclick='$("#inmap2wrapper").fadeIn("fast"); map.highlightMarker()'>
						<li onclick='$("#inmap2wrapper").fadeOut("fast");'>
						<li onclick='$("#minimap").fadeOut("fast"); if (!$("#dialog").is(":visible")) g.lock.remove("minimap")'></ul>
					<div id=maplist></div>
					<input type=text id=mapfilter>
				</div>
			</div>

			<div id=addons>
				<div id="addon_search_div"><span></span> <input id="addon_search"/></div>
				<div id=add_list>
					<h1 id="_t15"></h1>
					<div class="add_list_menu">
						<div class="menu_element" id="ad_opt_badged"></div>
						<div class="menu_element" id="ad_opt_popular"></div>
						<div class="menu_element" id="ad_opt_all"></div>
						<div class="menu_element" class="active" id="ad_opt_unverified" style="display:none;"></div>
					</div>
					<div class="view_port"></div>
				</div>
				<div id=add_mine><h1 id="_t16"></h1><div class="view_port"></div></div>
				<div id=add_edit><h1 id="_t17"></h1><div class="view_port"></div></div>
				<div id=add_active><h1 id="h1_add_active"></h1><div class="view_port"></div></div>
				<div id=add_help><h1 id="_t21"></h1><div id="addon_help_txt"></div></div>
			</div>
			<div id=addonspanel>
				<ul class=boxhover>
					<li onclick="extManager.task('add_list')">
					<li onclick="extManager.task('add_mine')">
					<li onclick="extManager.task('add_active')">
					<li onclick="extManager.task('add_help')">
					<li onclick="extManager.task('quit')"></ul>
			</div>

			<div id=newlvl onclick="$('#abilitypoints').fadeIn();"></div>
			<div id=abilitypoints>
				<div class=closebut onclick='$("#abilitypoints").fadeOut("fast")' rollover=22></div>
				<div id=qSpacer style='height:45px'></div>
				<b id=abpoints></b>

				<div id="strength-increase"></div>
				<div id="dexternity-increase"></div>
				<div id="intelect-increase"></div>

				<div class=ab1 onclick="_g('useab&a=str&cnt=1')"></div>
				<div class=ab1 style="top:178px" onclick="_g('useab&a=agi&cnt=1')"></div>
				<div class=ab1 style="top:243px" onclick="_g('useab&a=int&cnt=1')"></div>
				<div class=ab5 onclick="_g('useab&a=str&cnt=5')"></div>
				<div class=ab5 style="top:178px" onclick="_g('useab&a=agi&cnt=5')"></div>
				<div class=ab5 style="top:243px" onclick="_g('useab&a=int&cnt=5')"></div>
			</div>


			<div id=shop><span id=shop_store></span>
				<div id=for-you-plug></div><div id=for-you-txt></div>
				<div id=shop_buy></div><div id=shop_sell></div>
				<div id="for-you-plug-disabled">
					<div id="for-you-disabled-text"></div>
				</div>
				<div id=shq0></div><div id=shq1></div><div id=shq2></div><div id=shq3></div><div id=shq4></div>
				<div id=shop_bilans></div><div id=shop_close onclick='shop_close()'></div>
				<div id=shop_accept onclick='shop_accept()'></div>
				<div id=shop_recover_items onclick='shop_recover_items()'></div>
				<span id=shop_desc></span><div id="sl_shop_banner" onclick="slShopOpen()"></div><div onclick="shop_close(); _g('creditshop&credits_gold=-1');" id="gold_shop_banner"></div></div>
			<div id="goldShop"><div class="header" id="_t40"></div><div class="options"></div><div class="sllink" onclick="slShopOpen(); return false;"></div><div class="closelink" onclick="hideGoldShop(); return false;"></div></div>
			<div id=friends>
				<div class=closebut onclick="$('#friends').fadeOut('fast'); g.lock.remove('friends')" rollover=22></div>
				<div id=frsort onclick="g.fredit = !g.fredit; _g('friends&a=show')"></div>
				<div id=myfriends></div><div id=mfadd><div id=fradd onclick="_g('friends&a=finvite&nick=' + $('#frname').val())"></div><input class=frinp id=frname></div>
				<div id=myenemies></div><div id=meadd><div id=enadd onclick="_g('friends&a=eadd&nick=' + $('#enname').val())"></div><input class=frinp id=enname></div>
			</div>
            <div id="mc-addon">
                <div class="mc-header">
                    <div class="nick-header"></div>
                </div>
                <div class="mc-body">
                    <div class="all-texts"></div>
                    <div class="times-of-mute"></div>
                    <div class="unmute"></div>
                </div>
            </div>
            <div id="smc-addon">
                <div class="question"></div>
                <div class="days"></div>
                <div id="ban-reason-label"></div>
                <div class="input-wrapper">
                    <input id="banday_reason" class="ban-reason default">
                </div>
                <div class="ban-btn"></div>
            </div>
			<div id="chests-window">
				<div class="chests-choice-wrapper"></div>
				<div class="close-chests-window"></div>
			</div>
			<div id="pre-premium-panel">
				<div id="pre-premium-header-txt"></div>
				<div class="tiles-wrapper"></div>
				<div class="close-pre-premium"></div>
			</div>
			<div id="premiumshop">
				<div class="items_wrapper"></div>
				<div class="sl_amount_ps">122</div>
				<div class="buymore_ps" onclick="slShopOpen();"></div>
				<div class="closebutton_ps" onclick="$('#premiumshop').hide();"></div>
				<div class="promocode_button" onclick="codeManager.showCodeInputWindow();"></div>
			</div>
			<div id="eventCallendar">
				<div class=closebut onclick="eventCalendar.close();" rollover=22></div>
				<div class="matrix">
					<div class="week-switch cell previous">
						<div class="inner-cell"></div>
					</div>
					<div class="week-switch cell next">
						<div class="inner-cell"></div>
					</div>
					<div class="days-wrapper">

					</div>
				</div>
				<div class="controlls">
					<div class="date-display"></div>
					<div class="month-switcher">
						<div class="month-switch previous"></div>
						<div class="month-switch next"></div>
						<div class="month-display"></div>
					</div>
				</div>
			</div>

			<div id="adventCallendar">
				<div class="header">
					<div class="content">
						<div class="header-text-wrapper" id="advent_header_txt"></div>
					</div>
					<div class="close-button" onclick="adventCallendar.close()"></div>
				</div>
				<div class="windows-wrapper">

				</div>
			</div>

			<div id=clanbox class=clan></div>
			<div id=clanmenu class=clan>
				<ul class=boxhover>
					<!--<li onclick="$('#clanbox').html(g.clanlist)">-->
					<li                   onclick="newClanList()">						<span class="gfont" name="clan-list-item-menu"  		 id="clan-list-item-menu"   		></span></li>
					<li class= 'disabled' onclick="if (g.clan) clanOfficial()">						<span class="gfont" name="clan-official-page-item-menu"  id="clan-official-page-item-menu"  ></span></li>
					<li class= 'disabled' onclick="if (g.clan) clanPriv()">							<span class="gfont" name="clan-private-page-item-menu"   id="clan-private-page-item-menu"   ></span></li>
					<li class= 'disabled' onclick="if (g.clan) clanRecruit()">						<span class="gfont" name="clan-recruit-item-menu"  		 id="clan-recruit-item-menu"   		></span></li>
					<li class= 'disabled' onclick="if (g.clan) _g('clan&a=members')">					<span class="gfont" name="clan-members-item-menu"  		 id="clan-members-item-menu"   		></span></li>
					<li class= 'disabled' onclick="if (g.clan) clanTreasury()">						<span class="gfont" name="clan-treasure-item-menu"  	 id="clan-treasure-item-menu"   	></span></li>
					<li class= 'disabled' onclick="if (g.clan) clanManage()">							<span class="gfont" name="clan-manage-item-menu"  		 id="clan-manage-item-menu"   		></span></li>
					<li class= 'disabled' onclick="if (g.clan) _g('clan&a=dipl')">					<span class="gfont" name="clan-diplomacy-item-menu"  	 id="clan-diplomacy-item-menu"   	></span></li>
					<li class= 'disabled' onclick="if (g.clan) clanHistory(true)">					<span class="gfont" name="clan-history-item-menu"  		 id="clan-history-item-menu"   		></span></li>
					<li class= 'disabled' onclick="if (g.clan) _g('clan&a=quests_show')">				<span class="gfont" name="clan-quests-item-menu"  		 id="clan-quests-item-menu"   		></span></li>
					<li class= 'disabled' onclick="if (g.clan) _g('clan&a=skills_show')">				<span class="gfont" name="clan-skills-item-menu"  		 id="clan-skills-item-menu"   		></span></li>
					<li                   onclick="$('.clan').fadeOut(); g.lock.remove('clans');">	<span class="gfont" name="clan-close-item-menu"  		 id="clan-close-item-menu"   		></span></li>
				</ul>
				<div id="create_new_clan" onclick=_g('clan&a=create')></div>
			</div>
			<div id=clanFilter></div>

			<!--<div id="matchmaking-summary">-->
				<!--<div class="header-wrapper">-->
					<!--<div class="graphic"></div>-->
					<!--<div class="edit-header-label"></div>-->
				<!--</div>-->
				<!--<div class="middle-graphics"></div>-->

				<!--<div class="summary-content">-->
					<!--<div class="result-panel">-->
						<!--<div class="your-side">-->
							<!--<div class="your-result"></div>-->
							<!--<div class="your-name-and-level"></div>-->
							<!--<div class="your-prof"></div>-->
							<!--<div class="your-pr"></div>-->
						<!--</div>-->
						<!--<div class="middle-side">-->
							<!--<div class="middle-wrapper">-->
								<!--<div class="avatars-info-wrapper">-->
									<!--<div class="your-outfit-wrapper">-->
										<!--<div class="out-icon"></div>-->
									<!--</div>-->
									<!--<div class="vs-img-wrapper">-->
										<!--<div class="vs-img"></div>-->
									<!--</div>-->
									<!--<div class="enemy-outfit-wrapper">-->
										<!--<div class="out-icon"></div>-->
									<!--</div>-->
								<!--</div>-->
							<!--</div>-->
							<!--<div class="pr-change"></div>-->
							<!--<div class="arrow"></div>-->
						<!--</div>-->
						<!--<div class="enemy-side">-->
							<!--<div class="enemy-result"></div>-->
							<!--<div class="enemy-name-and-level"></div>-->
							<!--<div class="enemy-prof"></div>-->
							<!--<div class="enemy-pr"></div>-->
						<!--</div>-->
					<!--</div>-->
					<!--<div class="progress-points">-->
						<!--<div class="progress-points-val"></div>-->
					<!--</div>-->
					<!--<div class="current-stage"></div>-->
					<!--<div class="price-info" data-trans="#price_info#matchmaking"></div>-->
				<!--</div>-->
				<!--<div class="bottom-panel-graphics">-->
					<!--<div class="tokens-amount"></div>-->
					<!--<div class="close-wrapper"></div>-->
				<!--</div>-->
			<!--</div>-->

			<div id=trade>
				<div id="tradebg"></div>
				<div id=tradeground><div id=mytrader></div><div id=trader2></div><div id="trade_protection_info"></div>
					<div id=mytr_items></div><div id=tr2_items></div>
					<div id=mytr_sitems></div><div id=tr2_sitems></div>
					<div id=mytr_value>0</div><div id=tr2_value>0</div>
					<input id=mytr_gold tip='' onblur="$('#mytr_gold').val(round(g.trade.mygold, 2))"><div id=tr2_gold>0</div>
					<button id=tradeaccept onclick=tradeAccept()></button><button id=tradeaccept2></button>
					<button id=tradecancel onclick=tradeCancel()></button></div>
			</div>

			<div id=mails>
				<div class=closebut onclick=hideMails() rollover=22 style='margin-top:5px'></div>
				<div id=inbox></div>
			</div>
			<div id=mailnotifier></div>

			<div id=auctions>
				<div id=ahtitle><div class=closebut onclick=auctionsHide() rollover=22 style="margin-top:4px"></div></div>
				<div id=ahselect>
					<b onclick='ah_select(0, this)' id=b_myah></b>
					<div id="au0" style='color:yellow; border-bottom:1px solid #4c6139; padding:0 0 2px 2px; margin-right:4px'></div>
					<b id="au1" onclick='ah_select(1, this)'></b>
					<b id="au2" onclick='ah_select(2, this)'></b>
					<b id="au3" onclick='ah_select(3, this)'></b>
					<b id="au4" onclick='ah_select(4, this)'></b>
					<b id="au5" onclick='ah_select(5, this)'></b>
					<b id="au6" onclick='ah_select(6, this)'></b>
					<b id="au7" onclick='ah_select(7, this)'></b>
					<b id="au8" onclick='ah_select(8, this)'></b>
					<b id="au9" onclick='ah_select(9, this)'></b>
					<b id="au10" onclick='ah_select(10, this)'></b>
					<b id="au11" onclick='ah_select(11, this)'></b>
					<b id="au12" onclick='ah_select(12, this)'></b>
					<b id="au13" onclick='ah_select(13, this)'></b>
					<b id="au14" onclick='ah_select(14, this)'></b>
					<b id="au15" onclick='ah_select(15, this)'></b>
					<b id="au16" onclick='ah_select(16, this)'></b>
					<b id="au21" onclick='ah_select(21, this)'></b>
					<b id="au22" onclick='ah_select(22, this)'></b>
					<b id="au23" onclick='ah_select(23, this)'></b>
					<b id="au99" onclick='ah_select(99, this)'></b>
				</div>
				<div id=ah_window>
					<div class=redback>
						<span style='color:yellow' id="_t23"></span><br>
						<span id="_t24"></span>
						<div id=ah_new>
							<div style=" margin:5px 0px; width:295px;float:left;">
								<div class=itemcont>
									<div id=ah_item class=ahitem></div>
								</div>
								<label for="ah_price" id="_24_2"></label>
								<input id=ah_price>
								<label for="ah_bo" id="_t25"></label>
								<input id=ah_bo>
								<br><label for="ah_time" id="_t26"></label>
								<input id=ah_time>h
							</div>
							<button onclick=ah_sellItem() class=new_s></button>
							<div style="clear:both;">
								<small></small>
								<center style='color:yellow'><span id="_t27"></span><b id=ah_gl></b></center>
							</div>
						</div>
						<div id=ah_new-s>
							<div style=" margin:5px 0px; width:295px;float:left;">
								<div class=itemcont><div id=ah_item-s class=ahitem></div></div>
								<span id="_t28"></span>
								<span id="au_unbind_price"></span>
								<span id="_t29"></span>
								<div class="gold_txt special_gold">
									<label for="ah_price_special" id="_t41" onclick="toggleAuxGoldAuction()"></label>
									<div id="ah_price_special_hidden"><input id=ah_price_special placeholder=""/>*</div>
								</div>
								<div class="gold_txt special_gold_info" id="_t43"></div>
							</div>

							<button onclick=ah_sellItemS() class=new_s></button>
							<div style="clear:both;">
								<small id="_t30"></small>
								<small id="_t42"></small>
							</div>
						</div>
					</div><div class=sep></div>
					<div id=ah_mylist></div>
				</div>
				<div id=ah_list></div>
			</div>

            <div id=calendar-wrapper></div>

			<div id=depo>
				<div id=depo-title><div class=closebut onclick=depoHide() rollover=22 style="margin-top:4px"></div></div>
				<div id=depo-back></div>
				<div id=depo-right>
					<span id="depo-txt-rent"></span> <b style='color:#fffefe' id=depo-time></b><br>
					<button onclick="$('#depo-buttons').toggle()" id=depo-toggle></button><br>
					<div id=depo-buttons style='display:none'>
						<div class="infotxtdepo private-section">
							<span class="shadowed" id="_t31"></span>
							<span class="next_renew" style="display:none;">
								<span id="_t32"></span>
								<span class="date" style="color:white; font-weight:bold; background-color:#080"></span><br />
							</span>
							<button onclick="depoPay('s')" id=depo-pays></button>
							<button onclick="depoPay('z')" id=depo-payz></button><br>
							<button onclick=depoDel() id=depo-del></button>
						</div>
						<div class="infotxtdepo clan-section">
							<!-- generated in engine.js !-->
						</div>
					</div>
				</div>
				<div id="depo-sections"></div>
				<div id=depo-balance><span id="db_txt"></span><b style='color:#fffefe'>0m</b></div>
				<div id=depo-gold><input maxLength=6>m</div>
				<button id=depo-goldin onclick=depoGoldin()></button>
				<button id=depo-goldout onclick=depoGoldout()></button>
				<div id="depo-items-wrapper">
					<div id=depo-items></div>
				</div>
			</div>
			<div id=skills>
				<div id=skills_title>
					<div id=skillcount></div>
					<div id="skillInBattleCount"></div>
					<div class="skillUseInBattleInfo"></div>
					<div class="freeSkillsLabel"></div>
					<div class=closebut onclick=g.skills.hide() rollover=22 style="margin-top:4px"></div>
				</div>
				<div id="skills_body"></div>
				<div id="skills_footer">
                    <div id="bm-label1"></div>
                    <div class="info-bm-icon info-icon"></div>
                    <div id="bm-label2"></div>
                    <div class="bm-edit-button"></div>
                    <div class="bm-icon"></div>
                </div>
			</div>

			<div id=bm_edit_panel_container>
				<div id=bm_edit_panel_holder>
					<div id=bm_edit_panel>
						<div id="bm_skill_table_wrapper">
							<table id="bm_skill_table"></table>
						</div>
						<div id="bm_rpt_switch_wrapper">
							<div id="bm_rpt_switch"></div>
							<div class="label">Powtarzaj</div>
						</div>
						<div class="bm-opt-list">
							<ul class="boxhover">
								<li><span id="add-normal-attack" class="gfont" name="add-normal-attack-bm"></span></li>
								<li><span id="clear-bm-list"        class="gfont" name="clear-bm-list"></span></li>
								<li><span id="save-and-close-bm" class="gfont" name="save-and-close-bm"></span></li>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<div id=books>
				<div id=books_title><span class=closebut onclick="$('#books').fadeOut()" rollover=22 style="margin-top:4px"></span></div>
				<div id=book_c></div><div id=book_t></div>

				<div id=book_flores></div>
				<div id=book_p></div>
				<div id=book_prev onclick=bookPage(-1)></div><div id=book_next onclick=bookPage(1)></div>
			</div>

			<div id=rooms>
				<div id=rooms_title><div class=closebut onclick="$('#rooms').fadeOut(null, function() {g.lock.remove('motel');});" rollover=22 style="margin-top:4px"></div></div>
				<div id=rooms_c></div>
			</div>

			<div id="recipes">
				<div class="recipe-list-label"></div>
				<div class="recipe-list-search">
					<input class="search" placeholder="Szukaj">
				</div>
				<div class="recipe-header"></div>
				<div class="receipe-list"></div>
				<div class="choose-recipe">
					<div class="reagent-list-label"></div>
					<div class="recipe-wrapper"></div>
				</div>
				<input class="start-lvl" val=""/>
				<input class="stop-lvl" val=""/>
				<select class="choose-item-type"></select>
				<select class="choose-prof"></select>
				<div class="close-but"></div>
			</div>

            <div id="barter-window">

            </div>

            <div id="item-changer-group">

            </div>
            <div id="tp-scroll"></div>

			<div id="choose-outfit"></div>

			<div style='display:none'>
				<div id=h_help>
					<div id="h_help_scrolled" style="padding:0px 10px; margin:10px 0px; font-size:0.8em;height:400px;overflow:hidden;"><strong style="color:#400; font-size:16px;" id="_t37"></strong><br />
						<span id="_t38"></span></div>
				</div>
				<div id=h_battle>
					<div id="_t39"style="padding:10px;">

					</div>
				</div>
			</div>

			<div id=ver></div>
		</div>
		<div id=hmenu></div>
	</body>
Tests:
selector
document.querySelector('#abilitypoints .closebut')
get and selector
document.getElementById('abilitypoints').querySelector('.closebut')
Rendered benchmark preparation results:
Suite status: <idle, ready to run>

Previous results
Test case name	Result
selector
get and selector
Fastest: N/A

Slowest: N/A

Latest run results:
Run details: (Test run date: 2 years ago)
User agent: Mozilla/5.0 (Linux; Android 10; MAR-LX1A) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.181 Mobile Safari/537.36 (Ecosia [email protected])
Browser/OS: Chrome Mobile 88 on Android
View result in a separate tab
Test name	Executions per second
selector	83573.7 Ops/sec
get and selector	968435.9 Ops/sec
Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.
I'll provide an answer based on the provided HTML code.
It appears that this is a web page with various elements, including a book section, a room section, a recipe section, and more. I'll focus on the first two sections: `book_flores` and `rooms`.
To improve performance, I would suggest optimizing the JavaScript code in the `onclick` event handlers for `book_prev` and `book_next`. The current code uses the `bookPage(-1)` function to navigate to the previous page, which may cause unnecessary re-renders or DOM manipulations.
Here are some potential optimizations:
* Cache the results of `document.querySelector('#abilitypoints .closebut')` and `document.getElementById('abilitypoints').querySelector('.closebut')` in local variables to avoid repeated DOM lookups.
* Consider using a more efficient navigation library, such as React Navigation or Vue Router, to manage page transitions.
* Optimize the rendering of the book pages by reducing unnecessary re-renders or DOM updates.
However, without more information about the underlying JavaScript code and performance bottlenecks, it's difficult to provide more specific recommendations.
Please provide more details about the performance issues you're experiencing, such as slow loading times, high memory usage, or frequent crashes. This will help me provide more targeted advice for improving performance in your application.
Related benchmarks:
getElementById + querySelector vs querySelector (version: 0)

Comparing performance of: selector vs get and selector

Created: 4 years ago by: Guest

Jump to the latest result

selector

get and selector

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):
