Javascript vs Jquery selectors

JavaScript performance comparison

Test case created by

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<header id="fsHeader">
				<div class=" fsBanner fsStyleAutoclear" id="fsEl_2585">

			<div class="fsElement fsContent branding" id="fsEl_2586">

			<div class="fsElementContent">
    	<a href="/fs/pages/83"><img src="/uploaded/themes/default/images/misklogo.png" width="481"></a>

</div>


	</div>
	<div class="fsElement fsContainer" id="fsEl_3608">

			<div class="fsElementContent">
    	
	<div class="fsElement fsNavigation fsList nav-main" id="fsEl_3610">

			<div class="fsElementContent">
    <nav>
        <ul class="fsNavLevel1">
            	<li class="fsNavParentPage">
		<a href="/about-us">About Us</a>
			<div class="fsNavPageInfo">


					<ul class="fsNavLevel2">
							<li>
		<a href="/about-us/welcome-message">Welcome Message</a>
	</li>
	<li>
		<a href="/about-us/mission-vision-core-values">Mission, Vision &amp; Core Values</a>
	</li>
	<li>
		<a href="/about-us/who-we-are">Who we are</a>
	</li>
	<li>
		<a href="/about-us/governance">Governance</a>
	</li>
	<li>
		<a href="/about-us/facilities">Facilities</a>
	</li>
	<li>
		<a href="/about-us/staff">Staff</a>
	</li>

					</ul>
			</div>
	</li>
	<li class="fsNavParentPage">
		<a href="/learning-academics">Learning &amp; Academics</a>
			<div class="fsNavPageInfo">


					<ul class="fsNavLevel2">
							<li>
		<a href="/learning-academics/curriculum">Curriculum</a>
	</li>
	<li>
		<a href="/learning-academics/primary-school">Primary School (Grades PreK-5)</a>
	</li>
	<li>
		<a href="/learning-academics/secondary-school">Secondary School (Grades 6-12)</a>
	</li>
	<li>
		<a href="/learning-academics/technology-innovation">Technology &amp; Innovation</a>
	</li>
	<li>
		<a href="/learning-academics/student-support-services">Student Support Services</a>
	</li>
	<li>
		<a href="/learning-academics/library">Library</a>
	</li>
	<li>
		<a href="/learning-academics/extended-learning-activities">Extended Learning Activities</a>
	</li>
	<li>
		<a href="/learning-academics/service-learning">Service Learning</a>
	</li>
	<li>
		<a href="/learning-academics/school-calendar">School Calendar</a>
	</li>

					</ul>
			</div>
	</li>
	<li class="fsNavParentPage">
		<a href="/admissions">Admissions</a>
			<div class="fsNavPageInfo">


					<ul class="fsNavLevel2">
							<li>
		<a href="/admissions/application-process">Application Process</a>
	</li>
	<li>
		<a href="/admissions/apply-now">Apply Now!</a>
	</li>
	<li>
		<a href="/admissions/tuition-fees">Tuition &amp; Fees</a>
	</li>
	<li>
		<a href="/admissions/scholarship-program">Scholarship Program</a>
	</li>
	<li>
		<a href="/admissions/faq">FAQ</a>
	</li>

					</ul>
			</div>
	</li>
	<li class="fsNavParentPage">
		<a href="/life-at-misk">Life at Misk</a>
			<div class="fsNavPageInfo">


					<ul class="fsNavLevel2">
							<li>
		<a href="/life-at-misk/campus">Campus</a>
	</li>
	<li>
		<a href="/life-at-misk/services">Services</a>
	</li>
	<li>
		<a href="/life-at-misk/life-in-ksa">Life in KSA</a>
	</li>
	<li>
		<a href="/learning-academics/school-calendar">School Calendar</a>
	</li>
	<li>
		<a href="/life-at-misk/school-events">School Events</a>
	</li>
	<li>
		<a href="/life-at-misk/school-news">School News</a>
	</li>

					</ul>
			</div>
	</li>
	<li class="fsNavParentPage">
		<a href="/media-gallery">Media Gallery</a>
			<div class="fsNavPageInfo">


					<ul class="fsNavLevel2">
							<li>
		<a href="/media-gallery/photo-gallery">Photo Gallery</a>
	</li>
	<li>
		<a href="/media-gallery/video-gallery">Video Gallery</a>
	</li>

					</ul>
			</div>
	</li>
	<li class="fsNavParentPage">
		<a href="/careers">Careers</a>
			<div class="fsNavPageInfo">


					<ul class="fsNavLevel2">
							<li>
		<a href="/careers/open-positions">Open Positions</a>
	</li>
	<li>
		<a href="/careers/application-process">Application Process</a>
	</li>
	<li>
		<a href="/life-at-misk/life-in-ksa">Life in Saudi Arabia</a>
	</li>

					</ul>
			</div>
	</li>
	<li>
		<a href="/contact-us">Contact Us</a>
	</li>

        </ul>
</nav>

</div>


	</div>



</div>


	</div>



</div>


			</header>
    

Preparation code output

<header id="fsHeader"> <div class=" fsBanner fsStyleAutoclear" id="fsEl_2585"> <div class="fsElement fsContent branding" id="fsEl_2586"> <div class="fsElementContent"> <a href="/fs/pages/83"><img src="/uploaded/themes/default/images/misklogo.png" width="481"></a> </div> </div> <div class="fsElement fsContainer" id="fsEl_3608"> <div class="fsElementContent"> <div class="fsElement fsNavigation fsList nav-main" id="fsEl_3610"> <div class="fsElementContent"> <nav> <ul class="fsNavLevel1"> <li class="fsNavParentPage"> <a href="/about-us">About Us</a> <div class="fsNavPageInfo"> <ul class="fsNavLevel2"> <li> <a href="/about-us/welcome-message">Welcome Message</a> </li> <li> <a href="/about-us/mission-vision-core-values">Mission, Vision &amp; Core Values</a> </li> <li> <a href="/about-us/who-we-are">Who we are</a> </li> <li> <a href="/about-us/governance">Governance</a> </li> <li> <a href="/about-us/facilities">Facilities</a> </li> <li> <a href="/about-us/staff">Staff</a> </li> </ul> </div> </li> <li class="fsNavParentPage"> <a href="/learning-academics">Learning &amp; Academics</a> <div class="fsNavPageInfo"> <ul class="fsNavLevel2"> <li> <a href="/learning-academics/curriculum">Curriculum</a> </li> <li> <a href="/learning-academics/primary-school">Primary School (Grades PreK-5)</a> </li> <li> <a href="/learning-academics/secondary-school">Secondary School (Grades 6-12)</a> </li> <li> <a href="/learning-academics/technology-innovation">Technology &amp; Innovation</a> </li> <li> <a href="/learning-academics/student-support-services">Student Support Services</a> </li> <li> <a href="/learning-academics/library">Library</a> </li> <li> <a href="/learning-academics/extended-learning-activities">Extended Learning Activities</a> </li> <li> <a href="/learning-academics/service-learning">Service Learning</a> </li> <li> <a href="/learning-academics/school-calendar">School Calendar</a> </li> </ul> </div> </li> <li class="fsNavParentPage"> <a href="/admissions">Admissions</a> <div class="fsNavPageInfo"> <ul class="fsNavLevel2"> <li> <a href="/admissions/application-process">Application Process</a> </li> <li> <a href="/admissions/apply-now">Apply Now!</a> </li> <li> <a href="/admissions/tuition-fees">Tuition &amp; Fees</a> </li> <li> <a href="/admissions/scholarship-program">Scholarship Program</a> </li> <li> <a href="/admissions/faq">FAQ</a> </li> </ul> </div> </li> <li class="fsNavParentPage"> <a href="/life-at-misk">Life at Misk</a> <div class="fsNavPageInfo"> <ul class="fsNavLevel2"> <li> <a href="/life-at-misk/campus">Campus</a> </li> <li> <a href="/life-at-misk/services">Services</a> </li> <li> <a href="/life-at-misk/life-in-ksa">Life in KSA</a> </li> <li> <a href="/learning-academics/school-calendar">School Calendar</a> </li> <li> <a href="/life-at-misk/school-events">School Events</a> </li> <li> <a href="/life-at-misk/school-news">School News</a> </li> </ul> </div> </li> <li class="fsNavParentPage"> <a href="/media-gallery">Media Gallery</a> <div class="fsNavPageInfo"> <ul class="fsNavLevel2"> <li> <a href="/media-gallery/photo-gallery">Photo Gallery</a> </li> <li> <a href="/media-gallery/video-gallery">Video Gallery</a> </li> </ul> </div> </li> <li class="fsNavParentPage"> <a href="/careers">Careers</a> <div class="fsNavPageInfo"> <ul class="fsNavLevel2"> <li> <a href="/careers/open-positions">Open Positions</a> </li> <li> <a href="/careers/application-process">Application Process</a> </li> <li> <a href="/life-at-misk/life-in-ksa">Life in Saudi Arabia</a> </li> </ul> </div> </li> <li> <a href="/contact-us">Contact Us</a> </li> </ul> </nav> </div> </div> </div> </div> </div> </header>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
JQuery ID Find Class
var mainNav = $("#fsHeader").find(".nav-main");
pending…
JQuery ID and class
var mainNav = $("#fsHeader .nav-main");
pending…
Javascript Class
var mainNav = document.getElementsByClassName("nav-main");
pending…
Javascript Class (JQuery Object)
var mainNav = document.getElementsByClassName("nav-main"),
    $mainNav = $(mainNav);
pending…
Javascript ID and Class
var parent = document.getElementById("fsHeader"),
    mainNav = parent.getElementsByClassName("nav-main");
pending…
Javascript ID and Class (JQuery Object)
var parent = document.getElementById("fsHeader"),
    mainNav = parent.getElementsByClassName("nav-main"),
    $mainNav = $(mainNav);
pending…

Revisions

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

0 Comments