jQuery Performance Tips

1. jQuery Performance Tips Eric PascarelloaskEric@Pascarello.com @epascarello Presentation files: goo.gl/i6UbB

2. Quick Overview • Look at common problem areas • Selectors • Setting Properties • Manipulating DOM • Figure out the best practice

3. Selectors Poorly written selectors will be slow! Think of ways to narrow down how much scanning the selector engine has to do

4. Search Hierarchy FASTEST SLOWEST ID ELEMENT CLASSES ATTRIBUTES DOM CHECKS

5. Selector Tips Use ids when possible. Do not do element#id Try to use elements with class names Avoid using attributes/partial matches when possible.

6. Give Selectors Context Better specificity means quicker lookups. $(".foo") »Searches all elements that have class foo! $("div.foo") » Searches all divs that have a class foo $("#bar .foo") » Searches all elementsinside an element $("#bar div.foo") » Searches all divs inside an element

7. Selector Speed Test Selection made 1000 times with Firefox 3.6.13 on page with 1773 elements

8. Additional Context Hints Example: $( "#iddiv.foo" ) $( "div.foo", "#id" ) $( "#id").find( "div.foo" ) Syntax: $( "contextselector" ) $( selector, context ) $( context ).find( selector )

9. Multiple Selectors • Use commas $( "selector1, selector2, selector3" ) • Use add() $( "selector1" ).add( selector2 ).( selector3 ) • Note: selector2/3 can be strings or another jQuery object

10. Why use multiple selectors? Ctrl V + Ctrl C Happy! $("selector1").click( fncClick );$("selector2").click( fncClick ); $("selector3").click( fncClick ); OR $("selector1, selector2, selector3").click( fncClick );

11. Is This How You Code? $("#portlet").removeClass("closed"); $("#portlet").addClass("open"); $("#portlet").data("isOpen",true); $("#portlet").find("div.content").slideDown("slow");

12. Would you do this? ... mycmd.Parameters.Add(Param1) CONN.Open() mycmd.ExecuteNonQuery() CONN.Close() mycmd.Parameters.Add(Param2) CONN.Open() mycmd.ExecuteNonQuery() CONN.Close() mycmd.Parameters.Add(Param3) CONN.Open() mycmd.ExecuteNonQuery() CONN.Close() ...

13. Cache Your Selectors Set the jQuery object to a variable and reuse it! var portletObj = $("#portlet"); portletObj.removeClass("closed"); portletObj.addClass("open"); portletObj.data("isOpen",true); portletObj.find("div.content").slideDown("slow"); portletObj = null;

14. Chain Gang Chaining allows for multiple jQuery methods to be joined together. Keeps logical steps together and in order. Drives some developers insane seeing multiple steps on one line!

15. Chaining Example Set a css class, remove a class, set state data, and animate a child element. $("#portlet").removeClass("closed").addClass("open").data("isOpen",true).find("div.content").slideDown("slow");

16. Line Breaks For the Queasy $("#portlet") .removeClass("closed") .addClass("open") .data("isOpen",true) .find("div.content") .slideDown("slow");

17. jQuery’s end() Removes the last filtering state so you have the same context as you did before you filtered. Allows your chains to become even longer!

18. Lets Add More $("#portlet") .removeClass("closed") .addClass("open") .data("isOpen",true) .find("div.content") //div inside #portlet .slideDown("slow") .end() .find("div.moreMessage") //div inside #portlet .hide();

19. Caching vs Chaining? Caching and Chaining have no major differences in speed. Chaining ensures that you are caching handlers.

20. Setting Multiple Attributes var compLogo = $( "#logo" );compLogo.attr("alt","Awesome Corp");compLogo.attr("src","AwesomeCorp.png"); Better var compLogo = $( "#logo" ).attr( { "alt" : "Awesome Corp", "src" : "AwesomeCorp.png"  });

21. Setting Multiple CSS Styles • Use a class when changing multiple styles! $("a.foo").addClass("best"); • Using .css(property,value) or .css({}) causes multiple redraws. • BONUS: can change look and feel without changing JavaScript code!

22. Be Careful of each() • $(selector).each( function ) can be slow $("a.link").each( function(){ var elem = jQuery(this); var href = elem.attr("href"); if(href.indexOf("https")===0 && href.indexOf("login")>0){ elem.addClass("secure"); } }); • Try a for loop instead var links = $("a.link"); for(var i=links.length-1;i>=0;i--){ var elem = links.eq(i); var href = elem.attr("href"); if(href.indexOf("https")===0 && href.indexOf("login")>0){ elem.addClass("secure"); } }

23. DOM Manipulation - BAD • Avoid multiple writes to the DOM var ul = $("#myUl"); for(var i=0;i<500;i++){ ul.append("<li>" + i + "</li>"); }

24. DOM Manipulation - BETTER • Make one write to the DOM var ul = $("#myUl"); var lis = []; for(var i=0;i<500;i++){ lis.push("<li>" + i + "</li>"); } ul.append(lis.join(""));

25. DOM Manipulation - BEST • Wrap elements in one container element var ulParent = $("#myUl").parent(); var lis = ["<ul>"]; for(var i=0;i<500;i++){ lis.push("<li>" + i + "</li>"); } lis.push("</ul>"); ulParent.html( lis.join("") );

26. DOM Speed Test Appended 500 lis with Firefox 3.6.13 on page

27. Event Delegation • Don’t do this $("#myLink").click( function(){ $("#myLink").addClass("red"); } ); • Do this $("#myLink").click( function(){ $(this).addClass("red"); } );

28. Use Bubbling to your Advantage • This loops through every table cell $("#myTable td").click( function(){ $(this).addClass("selected"); } ); • Same result with one click event $("#myTable").click( function( e ){ var target = e.target; if(target.nodeName.toLowerCase()==="td"){ $(e.target).addClass("selected"); } });

29. Event Speed Test Table contained 500 cells. Tested with Firefox 3.6.13

30. Presentation files: http://goo.gl/i6UbB Eric PascarelloaskEric@Pascarello.com @epascarello