Info

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

http://msdn.microsoft.com/en-us/scriptjunkie/gg622887.aspx

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> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p><p><a href="#">link</a> blah</p><p><a href="#" rel="foo">link</a> blah</p><p><a href="#" rel="bar">link</a> blah</p><p><a href="#" rel="wee">link</a> blah</p>
<script>
  var $a = $(1);
</script>

Preparation code output

Test runner

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

Java applet disabled.

$("a").each(function() {
 var $this = $(this);
 $this.addClass((this.rel === "foo" && "foo") || "other");
});

$("a").each(function() {
 var $this = $a;
 $a.context = $a[0] = this;
 $this.addClass((this.rel === "foo" && "foo") || "other");
});

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

1 comment