Profiling jQuery, how do I make my app more snappy?

Question

I have some calls to jQuery functions like 14,000 times... what the hell? I don't have that many functions, really just simple stuff like appending and removing DOM elements, why do some of my event handlers call functions so many times?

Plus to compound my issues, Firebug's profiler just show's the min'd functions names... and even when I use the uncompressed library it mostly just shows init() or $.()

Does anyone have any tricks?

So I know this is a lot, but it seems really inefficient, it executes on our page newgoldleaf.com, some of the functions take almost 50ms to run... is that a long time or is it just me?

// prepare ajax for form posts
jQuery.ajaxSetup({
  "beforeSend" : function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})

// initializes panels and gets url hash, shows correct panel
jQuery.fn.initPanes = function() {
  $("div#main_content > div:not(.message)").addClass("inactive");

  var hash = window.location.hash.substr(1);
  this.each(function () {

    if ($(this).hasClass(hash)) {
      var panelToShow = "." + $(this).attr("class");
      $(panelToShow).removeClass("inactive").toggleClass("active");
    }
  });

  // if no hash found in url, activate first menu item   
  if (hash == "" ) {
    $(this).eq(0).activatePane(); 
  }

};

// shows panel when user clicks sidebar links
jQuery.fn.activatePane = function(pane) {

  if ($(this).hasClass("unavailable") == true) {
    return false;
  }

  if ($(this).hasClass("active") == false) {
    $("div#main_content > div:not(.message)").hide().removeClass("active").addClass("inactive");
    $(this).siblings().removeClass("active");
    var panelToShow = "div#main_content div." + $(this).attr("class");

    // set the hash in the url
    window.location.hash = $(this).attr("class");

    $(this).toggleClass("active");
    $(panelToShow).fadeIn("slow").removeClass("inactive").addClass("active");
  };
};

jQuery.fn.functionName = function() {

};

$(document).ready(function (){

  $('ul.examples li:not(img, h5, a)').hover(function (){
    var bubble = $(this).find("h5.bubble")
    bubble.animate({
      opacity:".99",
      bottom:"28px"
    }, 200);
  }, function (){
    var bubble = $(this).find("h5.bubble")
    bubble.animate({
      opacity:"0",
      bottom:"38px"
    }, 200).animate({
      bottom:"20px"
    }, 0);
  });


  // hide/show comment form for users with javascript
  $("div#comments_not_allowed").hide();
  $("form#new_comment").show();

  // $("body#index div.preview").slideShow();


  // error and flash notice animation
  $(".message").animate({
    opacity: "1",
  }, 2000).animate({
    opacity: "0",
  }, 2000).hide(500);

  // home page caption bubble for blog image fade in
  $("body#index h5.bubble").fadeIn("slow");
  $("body#index h5.bubble").animate({
    bottom: "22px",
    opacity: ".99"
  }, 1000);

  $("form#new_comment").submit(function() {
      $.post($(this).attr("action"), $(this).serialize(), null, "script");

    return false;
  });

  $("form#new_lead").submit(function() {
      $.post($(this).attr("action"), $(this).serialize(), null, "script");
    return false;
  });



  if ($("ul.panels").length > 0 ) {
    // panel animation
    $("div#aside ul li").initPanes();
    $("div#aside ul li").css({
      cursor:"pointer"
    });


    $("div#aside ul li").click(function () {
      $(this).activatePane();  
    });
  };

  $(document).load(function() {
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

    function startAnalytics() {
        var pageTracker = _gat._getTracker("UA-7434953-1");
        pageTracker._initData();
        pageTracker._trackPageview();
    }

    if (window.addEventListener) {
        window.addEventListener('load', startAnalytics, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onload', startAnalytics);
    }
  })


})

Answer 1

Here is a link to an article with some good tips:

http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

And here are a few more tips on DOM manipulation:

http://jquery-howto.blogspot.com/2009/02/5-easy-tips-on-how-to-improve-code.html

I haven't verified these tips, but worth a try (without seeing your code)

Answer 2

This trick should find your problem in about a minute.