jQuery Proven Performance Tips & Tricks
Upcoming SlideShare
Loading in...5
×
 

jQuery Proven Performance Tips & Tricks

on

  • 221,963 views

Performance optimization is a crucial aspect of building ‘snappy’ client-side applications and something which all developers using jQuery should bear in mind. In this talk, we're going to take a ...

Performance optimization is a crucial aspect of building ‘snappy’ client-side applications and something which all developers using jQuery should bear in mind. In this talk, we're going to take a look at some of the best practices, tips and tricks for improving the performance of your jQuery code in 2011 with some quick wins and a few new surprises along the way.

Statistics

Views

Total Views
221,963
Views on SlideShare
71,821
Embed Views
150,142

Actions

Likes
260
Downloads
1,730
Comments
13

223 Embeds 150,142

http://addyosmani.com 67791
http://techhatter.blogspot.com 34783
http://www.ideaxidea.com 10720
http://www.techhatter.com 3042
http://techhatter.blogspot.jp 2909
http://ontwik.com 2675
http://devx.tistory.com 1794
http://webhosting.pl 1747
http://planete-jquery.fr 1667
http://techhatter.blogspot.com.br 1397
http://www.amin007.org 1097
http://www.candesprojects.com 1074
http://techhatter.blogspot.co.uk 1067
http://andafter.org 933
http://techhatter.blogspot.ca 877
http://mambycamara.wordpress.com 857
http://techhatter.blogspot.de 825
http://www.mathieurobin.com 717
http://techhatter.blogspot.fr 707
http://techhatter.blogspot.com.es 696
http://www.codeandbeyond.org 672
http://www.jonathan-petitcolas.com 623
http://www.ryanbay.com 607
http://juristr.com 525
url_unknown 518
http://techhatter.blogspot.it 491
http://techhatter.blogspot.in 461
http://techhatter.blogspot.ro 354
http://knight76.tistory.com 349
http://www.jquery.allindoc.com 291
http://www.okjsp.pe.kr 291
http://techhatter.blogspot.mx 288
http://itseer.blogspot.tw 269
http://slides.jstrumpfloh-pc3.siag.it 264
http://techhatter.blogspot.ru 219
http://www.redditmedia.com 216
http://paper.li 215
http://techhatter.blogspot.com.ar 209
http://odesenvolvedor.andafter.org 186
http://opkijken2011 184
http://blog.lfgsistemas.com 175
http://techhatter.blogspot.sg 174
http://www.planete-jquery.fr 174
http://iworker.cz 174
http://blog.vokiel.com 168
http://techhatter.blogspot.co.il 164
http://freedomvn.wordpress.com 158
http://hyubs.com 146
http://techhatter.blogspot.kr 137
http://techhatter.blogspot.pt 128
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 13 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • See also this article I wrote specifically about minimizing javascript execution on page initialization.

    http://blog.lavoie.sl/2013/12/optimizing-page-loads-by-reducing-javascript.html
    Are you sure you want to
    Your message goes here
    Processing…
  • Really helpful.. I've been trying to find the best ways to make maximum optimised web application... and this presentation is one of the these optimisations.. thank you Osmani. :)
    Are you sure you want to
    Your message goes here
    Processing…
  • It's a really great presentation and very useful to learn jquery, but if you enable download link so all user can easily learn offline.
    Are you sure you want to
    Your message goes here
    Processing…
  • As usual again awesome tips Adnan.
    Are you sure you want to
    Your message goes here
    Processing…
  • wow! Great presentation... Thanks so much...
    Are you sure you want to
    Your message goes here
    Processing…

110 of 13

Post Comment
Edit your comment

jQuery Proven Performance Tips & Tricks jQuery Proven Performance Tips & Tricks Presentation Transcript

  • jQuery ProvenPERFORMANCETIPS & TRICKS WITH ADDY OSMANIIMAGES COPYRIGHT HASBRO AND TONKA, 1935-2011. and Mr. Monopoly
  • ABOUT ME• JavaScript & UI Developer at Aol• jQuery Core [Bugs/Docs/Learning] teams• SocketStream Core Team Member• Writer [Script Junkie / AddyOsmani.com/.net etc]
  • We used to give out these awesomefree coasters back in the 90s.
  • We now create real-time webframeworks and next-gen platforms.
  • Enough of that..LET’S START!
  • WHY DOES PERFORMANCEMATTER?• Apps should be snappy, not sloppy.• Best practices offer optimal approaches to solving problems.• If we don’t follow them, browsers can end up having to do more work.
  • MORE WORK =MORE MEMORY USE =SLOWER APPS.
  • TODAY, ALL OF THESESLIDES COME WITHPERFORMANCE TESTS.Not just saying X is faster...we’re proving it too.
  • PERFORMANCE TESTING• jsPerf.com - a great way to easily create tests comparing the performance of code snippets across different browsers• Makes it simple for anyone to share or modify tests• Used by the jQuery project, Yahoo and many other dev. teams Thanks to Mathias Bynens for creating it!
  • Example of test outputAnyone can tell what the fastest and slowest snippets are. http://jsperf.com/jquery-tree-traversing
  • Quick jsPerf tips for beginners • ops/sec is the number of times a test is projected to execute in a second • Tests get repeatedly executed until they reach the minimum time required to get a percentage uncertainly • Results based on ops/sec accounting for margin of error. The higher ops/sec the better.
  • 1PERFORMANCE TIP
  • STAY UP TO DATE!• Always use the latest version of jQuery core where possible.• Remember to regression test your scripts and plugins before upgrading.• Current version is 1.6.2 and 1.7 will probably get released this fall.
  • MOST POPULAR SITES USING JQUERY ONTHE GOOGLE CDN Old Stats from Scott Mitchell
  • INTERESTING FACTS• Performance improvements and new features usually land in major releases (eg. 1.6/1.x)• Bug patches and regression fixes land in 1.x.y releases (eg. 1.6.2)• Plenty of reasons to upgrade!
  • WHY?• Older versions won’t offer these instant performance benefits• As 47% of the popular sites on the web use jQuery, changes are heavily tested.• Upgrading usually a pain-free process.
  • Selector comparisons1.4.2 vs. 1.4.4 vs. 1.6.2 1.4.2 1.4.4 1.6.2 $(’.elem’) $(’.elem’, context);context.find(’.elem’); 0 27500 55000 82500 110000 http://jsperf.com/jquery-1-4-2-vs-1-6-2-comparisons
  • 1.6.x improvements.attr() performance improved .val() faster in 1.6.xhttp://jsperf.com/attr-vs-attrhooks http://jsperf.com/valhooks-vs-val/2
  • Note• There are certain selectors that are slower in 1.6.x than they are in 1.4.x• Be aware of the performance of selectors you’re using and you’ll be fine
  • 2PERFORMANCE TIP
  • KNOW YOUR SELECTORS• All selectors are not created equally• Just because a selection can be made in many ways, doesn’t mean each selector is just as performant• Do you know what the fastest to slowest selectors are?
  • Fast: ID & Element Selectors$(‘#Element,  form,  input’)• ID and element selectors are the fastest• This is because they’re backed by native DOM operations (eg. getElementById()).
  • Slower: Class Selectors$(‘.element’)• getElementsByClassName() not supported in IE5-8• Supported in FF3+, Safari 4+, Chrome 4+, Opera 10.10+ so faster in these. http://www.quirksmode.org/dom/w3c_core.html
  • Slowest: Pseudo & AttributeSelectors$(‘:visible,  :hidden’);  $(‘[attribute=value]’);• This is due to no native calls available that we can take advantage of.• querySelector() and querySelectorAll() help with this in modern browsers. http://www.quirksmode.org/dom/w3c_core.html
  • querySelectorAll() • Allows searching the DOM for elems based on a CSS selector in modern browsers. • jQuery attempts to use qSA without hitting Sizzle for queries including $(‘#parent .child’) or $(‘.parent a[href!=”hello”]’) • Optimise for selectors that use qSA vs. those that don’t such as :first, :last, :eq etc. • Valid selectors have a better chance of using it.
  • jsPerf selector comparison 1.4.2 1.6.2 ID Class Descendent tag AttributesInput/form select :nth-child 0 75000 150000 225000 300000 http://jsperf.com/dh-jquery-1-4-vs-1-6/6
  • BUT I’M TOO PRETTY TO GOTO JAIL!Pseudo-selectorsare powerful..butslow, so be carefulwhen using them.
  • The :hidden pseudo-selectorif ( jQuery.expr && jQuery.expr.filters ) {    jQuery.expr.filters.hidden = function( elem ) {        var width = elem.offsetWidth,            height = elem.offsetHeight;        return (width === 0 && height === 0) ||(!jQuery.support.reliableHiddenOffsets &&(elem.style.display ||jQuery.css( elem, "display" )) === "none");    };    jQuery.expr.filters.visible = function( elem ) {        return !jQuery.expr.filters.hidden( elem );    };} • Looking at the code, why is this bad?
  • Be careful because.. • If you use this with 100 elements, jQuery calls it 100 times. • :hidden is powerful but like all pseudos must be run against all the elements in your search space. • If possible, avoid them!.
  • jsPerf performance tests • jQuery1.4.2 vs 1.6 selector comparison tests http://jsperf.com/dh-jquery-1-4-vs-1-6/6 • jQuery 1.2.x vs 1.4.x vs. 1.6.x vs. qSA vs. qS vs. other frameworks http://jsperf.com/jquery-vs- sizzle-vs-midori-vs-mootools-selectors-test/26
  • 3PERFORMANCE TIP
  • UNDERSTAND PARENTSAND CHILDREN1) $(‘.child", $parent).show(); //context2) $parent.find(‘.child’).show(); //find()3) $parent.children(".child’).show(); //immediate children4) $(‘#parent > .child’).show(); //child combinator selector5) $(‘#parent .child’).show(); //class selector6) $(.child, $(#parent)).show(); //created context
  • Context1)  $(‘.child’,  $parent).show();  • Here the scope must be parsed and translated to $.parent.find(‘child’).show(); causing it to be slower.• ~5-10% slower than the fastest option
  • .find()2)  $parent.find(‘.child’).show();   • This is the fastest of the entire set. I’ll explain why shortly.
  • Immediate children3)  $parent.children(‘.child’).show();   • Internally uses $.sibling and JavaScript’s nextSibling() to find nodes following other nodes in the same tree. • ~50% slower than the fastest option
  • CSS child combinator selector4)  $(‘#parent  >  .child’).show();• Uses a child combinator selector, however Sizzle works from right to left.• Bad as it will match .child before checking it’s a direct child of the parent.• ~70% slower than the fastest option
  • CSS class selector5)  $(‘#parent  .child’).show();   • Uses a class selector and is constrained by the same rules as 4). • Internally also has to translate to using .find() • ~77% slower than the fastest option
  • Created context6)  $(‘.child’,  $(‘#parent’)).show();  • Equivalent internally to $(‘#parent’).find(‘.child’), however note that parent is a jQuery object.• ~23% slower than the fastest option
  • The fastest option is..2)  $parent.find(‘.child’).show();   • The parent selector is already cached here, so it doesn’t need to be refetched from the DOM. • Without caching this is ~ 16% slower. • Directly uses native getElementById, getElementsByName, getElementsByTagName to search inside the passed context under the hood.
  • It’s worth noting.. • .find() performs a recursive top-down search of all child and sub-elements • Other options presented may be more suitable/performant depending on what you’re trying to achieve.
  • jsPerf performance tests • context vs. selector vs. selector and .find() vs. parent/child selector vs. immediate children: http://jsperf.com/jquery- selectors-context/2
  • 4PERFORMANCE TIP
  • Don’t use jQuery unless it’sabsolutely necessary • Remember it’s sometimes more performant to use regular ol’ JavaScript • jQuery is JavaScript so there’s no harm. • How many times have you done this..
  • Eg. jQuery over-use of attr() $(a).bind(‘click’, function(){   console.log(You clicked: + $(this).attr(id)); });• jQuery’s ID selector only gets to document.getElementById after parsing the selector and creating a jQuery object
  • Why not use the DOMelement itself? This is faster: $(a).bind(‘click’, function(){   console.log(You clicked: + this.id); });• Avoid the overhead by remembering the jQuery-way isn’t always the best way.
  • Quick note: • this.id and $(this).attr(‘id’) both return the same value but remember.. • At a lower-level, this.getAttribute(‘id’) is equivalent to $(this).attr(‘id’); • However, as the attribute stays up to date, this.id is still better to use.
  • jsPerf Performance tests • $(this).attr(‘id’) vs. this.id http://jsperf.com/ el-attr-id-vs-el-id/2 • Using the former is actually 80-95% slower than directly accessing the attribute through the DOM element.
  • 5PERFORMANCE TIP
  • CACHING IS YOUR FRIEND.var parents =  $(‘.parents’), //caching children = $(‘.parents’).find(‘.child’), //bad kids = parents.find(‘.child’); //good • Caching just means we’re storing the result of a selection for later re-use.
  • So remember..• Each $(‘.elem’) will re-run your search of the DOM and return a new collection• You can then do anything with the cached collection.• Caching will decrease repeat selections.
  • Doing just about anything with thecached collection.var foo = $(‘.item’).bind(click, function({        foo.not(this).addClass(‘bar’)                  .removeClass(‘foobar’)                  .fadeOut(500);});
  • jsPerf performance tests • Comparing the performance of cached selectors vs. repeated element selections http://jsperf.com/ns-jq-cached • Uncached selectors in these tests are anywhere up to 62% slower than their cached equivalents.
  • 6PERFORMANCE TIP
  • CHAININGvar parents =  $(‘.parents’).doSomething().doSomethingElse(); • Almost all jQuery methods return a jQuery object and support chaining. • This means after executing a method on a selection, you can continue executing more. • Less code and it’s easier to write!
  • No-chaining vs. chaining//Without  chaining$(‘#notification’).fadeIn(‘slow’);$(‘#notification’).addClass(‘.activeNotification’);$(‘#notification’).css(‘marginLeft’,  ‘50px’);//With  chaining$(‘#notification’).fadeIn(‘slow’)                                    .addClass(‘.activeNotification’)                                          .css(‘marginLeft’,  ‘50px’);
  • jsPerf performance tests • Chained calls vs. separate calls vs. cached separate calls http://jsperf.com/jquery-chaining • Chaining is the fastest followed by cached separate calls.
  • 7PERFORMANCE TIP
  • EVENT DELEGATION• The idea that you allow events to bubble up the DOM tree to a parent element.• Important as it allows you to only bind a single event handler rather than 100s.• Works with elements in the DOM at runtime (and those injected later)
  • .bind() • Allows you to attach a handler to an event such as ‘click’, ‘mouseenter’ etc for elements • With larger sets, the browser has to keep track of all event handlers and this can take time to bind. • Doesn’t work with dynamically inserted elements.
  • .live() • Simplest form of supported event delegation • Allows you to attach a handler to an event for current and future matches of a selector • Works best for simple scenarios but has flaws (has to be at the top of the chain, fails alongside traversals) • Can’t chain to it, unlike other jQuery methods.
  • .delegate() • Allows you to specify the particular DOM element would like to bind to when attaching handlers to selections that match current/future elems. • Ensures we don’t bubble all the way up the DOM to capture an element’s target (unlike .live()) • Use when binding the same event handler to multiple elements
  • jsPerf performance tests • .live() vs .delegate() vs. delegate from body variations http://jsperf.com/jquery-delegate-vs-live-table-test/2 • .bind() vs .click() vs. live() vs. delegate() http:// jsperf.com/bind-vs-click/12 • .live() vs .live() context vs .delegate() vs. delegating to document.body http://jsperf.com/jquery-live-vs- jquery-delegate/15
  • 8PERFORMANCE TIP
  • THE DOM ISN’T A DATABASE• jQuery allows you to treat it like one but it isn’t.• Remember each DOM insertion is costly.• This means keep the use of .append (), .insertBefore(), .insertAfter() etc. to a minimum.
  • It’s also important to remember • Traversing the DOM to retrieve content or information stored in .text(), .html() etc is not the most optimal approach. • This could be in .data() instead, which allows us to attach any type of data to DOM elements safely.
  • Tip 1: Better .append() usage • Minimise use by building HTML strings in- memory and using a single .append() instead. • Multiple appends can be up to 90% slower when not appending to cached selectors and up to 20% slower with them.
  • Tip 2: Use .detach() • Works great when you’re doing heavy interaction with a node • Allows you to re-insert the node to the DOM once you’re ready • Up to 60% faster than working with undetached nodes.
  • .detach() example$(‘p’).click(function(){      $(this).toggleClass(‘off’);});var p;$(‘button’).click(function(){      if ( p ) { /*..additional modification*/        p.appendTo(‘body’);        p = null;      } else {        p = $(‘p’).detach();      }});
  • Tip 3: Better .data() usage • We usually attach data like this.. $(‘#elem’).data(  key  ,  value  ); • But this is actually much faster.. $.data(‘#elem’,  key  ,  value); • as there’s overhead creating a jQuery object and doing data-parsing in the first.
  • Notes • Although $.data is faster, it cannot be passed a selector, only a node. • This means $.data(elem, key, value) works where elem is already defined as an element.
  • jsPerf performance tests • .detach() vs not detaching http:// jsperf.com/to-detach-or-not-to-detach • jQuery.data vs jQuery.fn.data: http:// jsperf.com/jquery-data-vs-jqueryselection- data/11 • Multiple appends vs a single append http:// jsperf.com/string-concat-single-append-vs- multiple-append
  • 9PERFORMANCE TIP
  • UNDERSTAND LOOPS• Did you know that native for and while loops are faster than using $.each() and $.fn.each()?• jQuery makes it easy to iterate over collections, but remember it’s not always the most performant option.• Plugins like Ben Alman’s $.each2() sometimes perform better than $.fn.each
  • AVOID LOOPS IF YOU CAN. HARD, BUTNESTED DOM SELECTORS MAY PERFORMBETTER. • Unless absolutely necessary, avoid loops. They’re slow in every programming language. • If possible, use the selector engine instead to access the elements needed. • There are of course places loops cannot be substituted but try your best to optimise.
  • That said.. • Developers often need to iterate • The closure-scope provided by $.each is usually required for other reasons. • Should loops be such a pain-point you need to unroll them you’re lucky, but remember there are alternatives possible.
  • jsPerf performance tests • jQuery.each vs. for, while, reverse for, jQuery.fn.each and other loop approaches: http:// jsperf.com/jquery-each-vs-for-loop/24 • jQuery.fn.each vs Ben Alman’s .each2() http:// jsperf.com/jquery-each-vs-quickeach/3
  • PERFORMANCE TIP10
  • Avoid constructing new jQuery objects unlessnecessary$(‘a’).map(function(){ return $(this).text();}); • Developers commonly create new jQuery objects on iterations such as the above just to access some text • Using a lower-level method like $.method() rather than $.fn.method() can help improve performance with this. Thanks to James Padolsey for this tip
  • $.text vs $.fn.text http://jsperf.com/jquery-text-vs-html/5
  • Notes: • Not all jQuery methods have their own single- node functions • James proposed jQuery.single() as a solution to this problem • It uses a single jQuery object for all calls to jQuery.single() and only works for single DOM elements. http://james.padolsey.com/javascript/76-bytes-for-faster-jquery/
  • Bonus Tip
  • KEEP YOUR CODE DRY• Repeating the same code increases the size of your code-base and reduces productivity• DRY (don’t repeat yourself) encourages one representation of each piece of knowledge• Keeping code minimal can also remind you that chaining, caching etc can assist with this.
  • Let’s go through a quick example../*Lets store some default values to be read later*/var defaultSettings = {};defaultSettings[carModel]   = Mercedes;defaultSettings[carYear’]    = 2012;defaultSettings[carMiles]   = 5000;defaultSettings[carTint]    = Metallic Blue; 
  • Non-DRY code$(.someCheckbox).click(function(){   if ( this.checked ){                        $(#input_carModel).val(defaultSettings.carModel);        $(#input_carYear).val(defaultSettings.carYear);        $(#input_carMiles).val(defaultSettings.carMiles);        $(#input_carTint).val(defaultSettings.carTint);  } else {                 $(#input_carModel).val();             $(#input_carYear).val();        $(#input_carMiles).val();        $(#input_carTint).val(); }});
  • DRY codevar props = [carModel, carYear, carMiles, carTint];$(.someCheckbox).click(function(){            var checked = this.checked;    /*        What are we repeating?        1. input_ precedes each field name        2. accessing the same array for settings        3. repeating value resets          What can we do?        1. programmatically generate the field names        2. access array by key        3. merge this call using terse coding (ie. if checked,            set a value, otherwise dont)    */         $.each(props,function(i,key){               $(#input_ + key).val(checked ? defaultSettings[key] : );       });});
  • THANKS.• Props to Adam Sontag, JD Dalton, Paul Irish, Timmy Willison, James Padolsey, Mathias Bynens, Matt Baker and the team @jquery• For more on me: • http://addyosmani.com • @addyosmani
  • THAT’S IT!GO BUILD AWESOME THINGS.