#foo vs div[id=foo] vs [ID=foo]

JavaScript performance comparison

Test case created by Salman

Info

$("#foo") vs $("div[id=foo]") vs $("[id=foo]")

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div id="bleh">
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div id="bar">
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div id="foo">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas viverra magna
  accumsan pretium. Donec porta lorem et elit porttitor tempor. Fusce vel auctor dui.
  Nulla tempor libero tellus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>
<div>
  Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum
  id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh
  imperdiet urna, in facilisis purus elit sit amet purus.
</div>

Preparation code output

Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas viverra magna accumsan pretium. Donec porta lorem et elit porttitor tempor. Fusce vel auctor dui. Nulla tempor libero tellus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.
Morbi venenatis tempor purus eu facilisis. Praesent tincidunt odio eget arcu interdum id vestibulum sapien rhoncus. Cras porta, nunc at vulputate pharetra, massa nibh imperdiet urna, in facilisis purus elit sit amet purus.

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
$("#foo")
$("#foo").length
pending…
$("div[id=foo]")
$("div[id=foo]").length
pending…
$("[id=foo]")
$("[id=foo]").length
pending…

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

Compare results of other browsers

0 comments

Add a comment