<? Online-PHP::Tutorials ?>

« Back

• Created: 07 Jun 11

  jQuery performance tips

  jQuery Tips

  So here are some of the important points:

  • Use direct ID in the selector
    instead of $('#div .class') use $('#div_class')
     
  • Add tags before class name in the selector
    instead of $('#div .class') use $('#div span.class')
     
  • Create local vars for JQ objects which are accessed more than once
    var obj = $('div span.class');
    obj.bind('click', clickSpan);
    obj.css('background', 'red');
     
  • Use For instead of Each
     
  • Use .html() instead of DOM manipulations, when possible
     
  • Reduce elements on event binding - Use event.target instead of binding event to many items within a container
    instead of
    $('#my_list li').bind('click', ...)
    use
    $('#my_list').bind('click', function(e) {
      var elem = $(e.target);
      if (e.target.nodeName == 'LI') {
        ...
      }
    }
     
  • Use $(window).load(...) instead of $(document).ready(...)
     
  • Pull elements off the DOM, manupulate, and than return them back

   

  References:

  http://www.artzstudio.com/2009/04/jquery-performance-rules/
  http://jonraasch.com/blog/10-advanced-jquery-performance-tuning-tips-from-paul-irish

   

  Enjoy,
  Gregory C.