jQuery .find() vs. context selector vs non-context selector

JavaScript performance comparison

Revision 68 of this test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<p>
    <ins></ins>
</p>

<article>
	<p type="1">A test</p>
	<p><ins></ins></p>
	<p>This is text</p>
</article>
<p>
    <ins></ins>
</p>
<article>
	<p type = "2">A test</p>
	<p><ins></ins></p>
	<p>This is text</p>
</article>
<p>
    <ins></ins>
</p>
<article>
	<p type = "3">A test</p>
	<p><ins></ins></p>
	<p>This is text</p>
	<article>
		<p>A test</p>
		<p><ins></ins></p>
		<p>This is text</p>
		<article>
			<p>A test</p>
			<p><ins></ins></p>
			<p>This is text</p>
			<article>
				<p>A test</p>
				<p><ins></ins></p>
				<p>This is text</p>
                <div id = "divTest1">
				<article>
					<p type = "4">A test</p>
					<p><ins></ins></p>
					<p>This is text</p>
					<article>
						<p type = "5">A test</p>
						<p><ins></ins></p>
						<p>This is text</p>
							<article>
								<p>A test</p>
								<p><ins></ins></p>
								<p>This is text</p>
							</article>
					</article>
				</article>
                </div>
			</article>
		</article>
	</article>
</article>
<article>
	<p type = "6">A test</p>
	<div>
		<div>
			<div>
				<p><ins></ins></p>
			</div>
		</div>
	</div>
	<p>This is text</p>
</article>
      
<script>
Benchmark.prototype.setup = function() {
  var $article = $('article');
  var article = $article[0];

};
</script>

Preparation code output

<p> <ins></ins> </p> <article> <p type="1">A test</p> <p><ins></ins></p> <p>This is text</p> </article> <p> <ins></ins> </p> <article> <p type = "2">A test</p> <p><ins></ins></p> <p>This is text</p> </article> <p> <ins></ins> </p> <article> <p type = "3">A test</p> <p><ins></ins></p> <p>This is text</p> <article> <p>A test</p> <p><ins></ins></p> <p>This is text</p> <article> <p>A test</p> <p><ins></ins></p> <p>This is text</p> <article> <p>A test</p> <p><ins></ins></p> <p>This is text</p> <div id = "divTest1"> <article> <p type = "4">A test</p> <p><ins></ins></p> <p>This is text</p> <article> <p type = "5">A test</p> <p><ins></ins></p> <p>This is text</p> <article> <p>A test</p> <p><ins></ins></p> <p>This is text</p> </article> </article> </article> </div> </article> </article> </article> </article> <article> <p type = "6">A test</p> <div> <div> <div> <p><ins></ins></p> </div> </div> </div> <p>This is text</p> </article>

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
find method (each no context)
var has;
$(article).find("p").each(function() {
  has = $(this).attr("type") == "3" ? true : false
})
pending…
one selector(no context)
var check = $("article p[type='3']").length;
var has = check > 0 ? true : false
pending…
one selector with context
var check = $("article p[type='5']" , $("#divTest1")[0]).length;
var has = check > 0 ? true : false
pending…
one selector with context2
var check = $("#divTest1 article p[type='5']").length;
var has = check > 0 ? true : false
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.

0 Comments

A test

This is text

A test

This is text

A test

This is text

A test

This is text

A test

This is text

A test

This is text

A test

This is text

A test

This is text

A test

This is text

A test

This is text