Is this piece of Javascript inefficient?

Question

I was just wondering whether this snippet of Javascript is going to slow down my site:

$(function(){
 var realLink = location.href;
 $( "#nav a" ).each(
  function( intIndex ){
   String.prototype.startsWith = function(str){
    return (this.indexOf(str) === 0);
   }
   var pageLink = $(this).attr("href");

   if ( realLink.startsWith(pageLink) )
    $(this).parent().addClass("active");   
  }
 );
});

It only loops about 5-7 times, and I don't have very much Javascript looping experience.

Answer 1

Should be fine. If the #nav element doesn't contain thousands of links you should be OK.

Install Firebug for Firefox and you can do a profile run. It will tell you how much time it spends in each function. My guess it will be in milliseconds for this case.

Answer 2

You could make that code perform a little better by changing it to:

String.prototype.startsWith = function(str){
    return(this.indexOf(str) == 0);
}

$(function(){
    var realLink = location.href;

    $('#nav a').each(function(intIndex){
        var pageLink = $(this).attr("href");
        if(realLink.startsWith(pageLink))
            $(this).parent().addClass("active");
        });
});

It just breaks out the definition of startsWith() so you don't define it for each iteration of the loop.

Answer 3

There's nothing inherently wrong with this snippet, except that you're constantly creating and assigning a function to String.prototype.startsWith in a loop. That, of course, is an unnecessary work, and should at least be:

$(function(){
 var realLink = location.href;
 String.prototype.startsWith = function(str){
   return (this.indexOf(str) === 0);
 };
 $( "#nav a" ).each(
  function( intIndex ){
   var pageLink = $(this).attr("href");
   if ( realLink.startsWith(pageLink) )
    $(this).parent().addClass("active");   
  }
 );
});

I also don't see a need for intIndex argument there. It's not used anywhere in a function.

Answer 4

Try using Firebug's Profiling Feature to measure the performance of your script.

Answer 5

if you use the ^= operator in Sizzle (well, jQuery in this case) it means "starts with this value" basically. try this:

$(function(){
   $( '#nav a:not( [href^="' + startsWith + '"] )' ).addClass( 'active' );
});

and change startsWith to a variable of your choice.