Info

Testing/profiling the code patterns from the Script Junkie article "(pre)Maturely Optimize Your JavaScript"

Snippet comparison #3

Preparation code

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

<style>
.foo { color:blue; }
.other { color:red; }
</style>


<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>
<p><a href="#">link</a></p><p>blah</p><p><a href="#" rel="foo">link</a></p><p>blah</p>
<p><a href="#" rel="bar">link</a></p><p>blah</p><p><a href="#" rel="wee">link</a></p><p>blah</p>

<script>
  var $a = $(0);
  
  function fn_1() {
   var $a = $(this);
   if ($a.attr("rel") == "foo") {
    $a.addClass("foo");
   }
   else {
    $a.addClass("other");
   }
  }
  
  function fn_2() {
   $a.context = $a[0] = this; // fake the collection object
   if ($a.attr("rel") == "foo") {
    $a.addClass("foo");
   }
   else {
    $a.addClass("other");
   }
  }
</script>

Preparation code output

Test runner

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

Java applet disabled.

$("a").each(fn_1);

$("a").each(fn_2);

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:

• Revision 1: published by Kyle Simpson on 16th February 2011 and last updated on 30th April 2011
• Revision 5: published by Rick Waldron on 17th February 2011
• Revision 6: published by Kyle Simpson on 30th April 2011
• Revision 8: published by Paul Grenier on 21st March 2012

0 comments