SlideShare a Scribd company logo
1 of 87
Download to read offline
jQuery Proven

PERFORMANCE
TIPS & TRICKS                                   WITH ADDY OSMANI




IMAGES 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 awesome
free coasters back in the 90s.
We now create real-time web
frameworks and next-gen platforms.
Enough of that..

LET’S START!
WHY DOES PERFORMANCE
MATTER?
• 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 THESE
SLIDES COME WITH
PERFORMANCE 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 output
Anyone 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.
1
PERFORMANCE 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 ON
THE 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.x
http://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
2
PERFORMANCE 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 & Attribute
Selectors
$(‘: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

      Attributes

Input/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 GO
TO JAIL!


Pseudo-selectors
are powerful..but
slow, so be careful
when using them.
The :hidden pseudo-selector
if ( 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
3
PERFORMANCE TIP
UNDERSTAND PARENTS
AND CHILDREN
1) $(‘.child", $parent).show(); //context

2) $parent.find(‘.child’).show(); //find()

3) $parent.children(".child’).show(); //immediate children

4) $(‘#parent > .child’).show(); //child combinator selector

5) $(‘#parent .child’).show(); //class selector

6) $('.child', $('#parent')).show(); //created context
Context
1)  $(‘.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 children

3)  $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 selector
4)  $(‘#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 selector

5)  $(‘#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 context
6)  $(‘.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
4
PERFORMANCE TIP
Don’t use jQuery unless it’s
absolutely 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 DOM
element 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.
5
PERFORMANCE 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 the
cached 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.
6
PERFORMANCE TIP
CHAINING
var 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.
7
PERFORMANCE 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
8
PERFORMANCE 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
9
PERFORMANCE 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, BUT
NESTED DOM SELECTORS MAY PERFORM
BETTER.
 • 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 TIP




10
Avoid constructing new jQuery objects unless
necessary

$(‘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..


/*Let's 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 code
var 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 don't)
    */  
       $.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.

More Related Content

What's hot

Pacemaker+DRBD
Pacemaker+DRBDPacemaker+DRBD
Pacemaker+DRBDDan Frincu
 
MariaDB Galera Cluster
MariaDB Galera ClusterMariaDB Galera Cluster
MariaDB Galera ClusterAbdul Manaf
 
CEPH DAY BERLIN - PRACTICAL CEPHFS AND NFS USING OPENSTACK MANILA
CEPH DAY BERLIN - PRACTICAL CEPHFS AND NFS USING OPENSTACK MANILACEPH DAY BERLIN - PRACTICAL CEPHFS AND NFS USING OPENSTACK MANILA
CEPH DAY BERLIN - PRACTICAL CEPHFS AND NFS USING OPENSTACK MANILACeph Community
 
Same plan different performance
Same plan different performanceSame plan different performance
Same plan different performanceMauro Pagano
 
Rpp nabi muhammadsaw mendakwahkan islam dimekkah
Rpp nabi muhammadsaw mendakwahkan islam dimekkahRpp nabi muhammadsaw mendakwahkan islam dimekkah
Rpp nabi muhammadsaw mendakwahkan islam dimekkahaisyaszuhriyah
 
Как да направим живота си по - лесен с добър QA подход
Как да направим живота си по - лесен с добър QA подходКак да направим живота си по - лесен с добър QA подход
Как да направим живота си по - лесен с добър QA подходBozhidar Boshnakov
 
La Pastorela Para Segundo Grado
La Pastorela Para Segundo GradoLa Pastorela Para Segundo Grado
La Pastorela Para Segundo Gradomacario1967
 
Looking towards an official cassandra sidecar netflix
Looking towards an official cassandra sidecar   netflixLooking towards an official cassandra sidecar   netflix
Looking towards an official cassandra sidecar netflixVinay Kumar Chella
 
How to Take Advantage of Optimizer Improvements in MySQL 8.0
How to Take Advantage of Optimizer Improvements in MySQL 8.0How to Take Advantage of Optimizer Improvements in MySQL 8.0
How to Take Advantage of Optimizer Improvements in MySQL 8.0Norvald Ryeng
 
Understanding oracle rac internals part 2 - slides
Understanding oracle rac internals   part 2 - slidesUnderstanding oracle rac internals   part 2 - slides
Understanding oracle rac internals part 2 - slidesMohamed Farouk
 
Oracle 12c PDB insights
Oracle 12c PDB insightsOracle 12c PDB insights
Oracle 12c PDB insightsKirill Loifman
 
Logical Replication in PostgreSQL
Logical Replication in PostgreSQLLogical Replication in PostgreSQL
Logical Replication in PostgreSQLEDB
 
When is MyRocks good?
When is MyRocks good? When is MyRocks good?
When is MyRocks good? Alkin Tezuysal
 
MySQL Performance Schema in Action
MySQL Performance Schema in ActionMySQL Performance Schema in Action
MySQL Performance Schema in ActionSveta Smirnova
 
Misal de Beato José Sánchez del Río
Misal de Beato José Sánchez del RíoMisal de Beato José Sánchez del Río
Misal de Beato José Sánchez del RíoPrimitivo Cuevas
 
RPP PAI dan Budi Pekerti SMP Kelas 8
RPP PAI dan Budi Pekerti SMP Kelas 8RPP PAI dan Budi Pekerti SMP Kelas 8
RPP PAI dan Budi Pekerti SMP Kelas 8Wahyono Saputro
 

What's hot (18)

Pacemaker+DRBD
Pacemaker+DRBDPacemaker+DRBD
Pacemaker+DRBD
 
MariaDB Galera Cluster
MariaDB Galera ClusterMariaDB Galera Cluster
MariaDB Galera Cluster
 
CEPH DAY BERLIN - PRACTICAL CEPHFS AND NFS USING OPENSTACK MANILA
CEPH DAY BERLIN - PRACTICAL CEPHFS AND NFS USING OPENSTACK MANILACEPH DAY BERLIN - PRACTICAL CEPHFS AND NFS USING OPENSTACK MANILA
CEPH DAY BERLIN - PRACTICAL CEPHFS AND NFS USING OPENSTACK MANILA
 
Same plan different performance
Same plan different performanceSame plan different performance
Same plan different performance
 
Rpp nabi muhammadsaw mendakwahkan islam dimekkah
Rpp nabi muhammadsaw mendakwahkan islam dimekkahRpp nabi muhammadsaw mendakwahkan islam dimekkah
Rpp nabi muhammadsaw mendakwahkan islam dimekkah
 
Как да направим живота си по - лесен с добър QA подход
Как да направим живота си по - лесен с добър QA подходКак да направим живота си по - лесен с добър QA подход
Как да направим живота си по - лесен с добър QA подход
 
La Pastorela Para Segundo Grado
La Pastorela Para Segundo GradoLa Pastorela Para Segundo Grado
La Pastorela Para Segundo Grado
 
Looking towards an official cassandra sidecar netflix
Looking towards an official cassandra sidecar   netflixLooking towards an official cassandra sidecar   netflix
Looking towards an official cassandra sidecar netflix
 
How to Take Advantage of Optimizer Improvements in MySQL 8.0
How to Take Advantage of Optimizer Improvements in MySQL 8.0How to Take Advantage of Optimizer Improvements in MySQL 8.0
How to Take Advantage of Optimizer Improvements in MySQL 8.0
 
Convert single instance to RAC
Convert single instance to RACConvert single instance to RAC
Convert single instance to RAC
 
Understanding oracle rac internals part 2 - slides
Understanding oracle rac internals   part 2 - slidesUnderstanding oracle rac internals   part 2 - slides
Understanding oracle rac internals part 2 - slides
 
Oracle 12c PDB insights
Oracle 12c PDB insightsOracle 12c PDB insights
Oracle 12c PDB insights
 
Logical Replication in PostgreSQL
Logical Replication in PostgreSQLLogical Replication in PostgreSQL
Logical Replication in PostgreSQL
 
When is MyRocks good?
When is MyRocks good? When is MyRocks good?
When is MyRocks good?
 
MySQL Performance Schema in Action
MySQL Performance Schema in ActionMySQL Performance Schema in Action
MySQL Performance Schema in Action
 
Misal de Beato José Sánchez del Río
Misal de Beato José Sánchez del RíoMisal de Beato José Sánchez del Río
Misal de Beato José Sánchez del Río
 
RPP PAI dan Budi Pekerti SMP Kelas 8
RPP PAI dan Budi Pekerti SMP Kelas 8RPP PAI dan Budi Pekerti SMP Kelas 8
RPP PAI dan Budi Pekerti SMP Kelas 8
 
Wait events
Wait eventsWait events
Wait events
 

Viewers also liked

Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutesSimon Willison
 
jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)Addy Osmani
 
WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010Joone Hur
 
Performance management system
Performance management systemPerformance management system
Performance management systemtsheten
 
The Top 5 Performance Management Tools
The Top 5 Performance Management ToolsThe Top 5 Performance Management Tools
The Top 5 Performance Management ToolsBernard Marr
 
Developing Metrics and KPI (Key Performance Indicators
Developing Metrics and KPI (Key Performance IndicatorsDeveloping Metrics and KPI (Key Performance Indicators
Developing Metrics and KPI (Key Performance IndicatorsVictor Holman
 
Performance Management System
Performance Management SystemPerformance Management System
Performance Management SystemSurabhi Mohan
 
jQuery vs AJAX Control Toolkit
jQuery vs AJAX Control ToolkitjQuery vs AJAX Control Toolkit
jQuery vs AJAX Control ToolkitErik Ralston
 
Go to hell Flash, we don't need you anymore! GothamJs
Go to hell Flash, we don't need you anymore! GothamJsGo to hell Flash, we don't need you anymore! GothamJs
Go to hell Flash, we don't need you anymore! GothamJsmichalbu
 
DISCUS: Distributed Innovation and Scalable Collaboration in Uncertain Settings
DISCUS: Distributed Innovation and Scalable Collaboration in Uncertain SettingsDISCUS: Distributed Innovation and Scalable Collaboration in Uncertain Settings
DISCUS: Distributed Innovation and Scalable Collaboration in Uncertain SettingsXavier Llorà
 
서블릿(servlet)
서블릿(servlet)서블릿(servlet)
서블릿(servlet)JungHoon Lee
 
Open-source Mic Talks at AOL
Open-source Mic Talks at AOLOpen-source Mic Talks at AOL
Open-source Mic Talks at AOLAddy Osmani
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQueryRemy Sharp
 
Servlet/JSP course chapter 1: Introduction to servlets
Servlet/JSP course chapter 1: Introduction to servletsServlet/JSP course chapter 1: Introduction to servlets
Servlet/JSP course chapter 1: Introduction to servletsJavaEE Trainers
 
Using Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeUsing Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeRebecca Murphey
 
forensic document examiner using graphology science
forensic document examiner using graphology scienceforensic document examiner using graphology science
forensic document examiner using graphology scienceGargee Hiray
 

Viewers also liked (20)

Learning jQuery in 30 minutes
Learning jQuery in 30 minutesLearning jQuery in 30 minutes
Learning jQuery in 30 minutes
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
jQuery in 15 minutes
jQuery in 15 minutesjQuery in 15 minutes
jQuery in 15 minutes
 
jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)jQuery Performance Tips and Tricks (2011)
jQuery Performance Tips and Tricks (2011)
 
WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010WebKit at the Future Web Forum 2010
WebKit at the Future Web Forum 2010
 
jQuery for beginners
jQuery for beginnersjQuery for beginners
jQuery for beginners
 
Performance management system
Performance management systemPerformance management system
Performance management system
 
The Top 5 Performance Management Tools
The Top 5 Performance Management ToolsThe Top 5 Performance Management Tools
The Top 5 Performance Management Tools
 
Developing Metrics and KPI (Key Performance Indicators
Developing Metrics and KPI (Key Performance IndicatorsDeveloping Metrics and KPI (Key Performance Indicators
Developing Metrics and KPI (Key Performance Indicators
 
Performance Management System
Performance Management SystemPerformance Management System
Performance Management System
 
jQuery vs AJAX Control Toolkit
jQuery vs AJAX Control ToolkitjQuery vs AJAX Control Toolkit
jQuery vs AJAX Control Toolkit
 
Go to hell Flash, we don't need you anymore! GothamJs
Go to hell Flash, we don't need you anymore! GothamJsGo to hell Flash, we don't need you anymore! GothamJs
Go to hell Flash, we don't need you anymore! GothamJs
 
DISCUS: Distributed Innovation and Scalable Collaboration in Uncertain Settings
DISCUS: Distributed Innovation and Scalable Collaboration in Uncertain SettingsDISCUS: Distributed Innovation and Scalable Collaboration in Uncertain Settings
DISCUS: Distributed Innovation and Scalable Collaboration in Uncertain Settings
 
서블릿(servlet)
서블릿(servlet)서블릿(servlet)
서블릿(servlet)
 
Open-source Mic Talks at AOL
Open-source Mic Talks at AOLOpen-source Mic Talks at AOL
Open-source Mic Talks at AOL
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQuery
 
Client-Side Packages
Client-Side PackagesClient-Side Packages
Client-Side Packages
 
Servlet/JSP course chapter 1: Introduction to servlets
Servlet/JSP course chapter 1: Introduction to servletsServlet/JSP course chapter 1: Introduction to servlets
Servlet/JSP course chapter 1: Introduction to servlets
 
Using Objects to Organize your jQuery Code
Using Objects to Organize your jQuery CodeUsing Objects to Organize your jQuery Code
Using Objects to Organize your jQuery Code
 
forensic document examiner using graphology science
forensic document examiner using graphology scienceforensic document examiner using graphology science
forensic document examiner using graphology science
 

Similar to jQuery Proven Performance Tips & Tricks

How to use selenium successfully
How to use selenium successfullyHow to use selenium successfully
How to use selenium successfullyTEST Huddle
 
Mastering Test Automation: How to Use Selenium Successfully
Mastering Test Automation: How to Use Selenium Successfully Mastering Test Automation: How to Use Selenium Successfully
Mastering Test Automation: How to Use Selenium Successfully Applitools
 
jQuery Performance Tips and Tricks
jQuery Performance Tips and TricksjQuery Performance Tips and Tricks
jQuery Performance Tips and TricksValerii Iatsko
 
The Many Ways to Test Your React App
The Many Ways to Test Your React AppThe Many Ways to Test Your React App
The Many Ways to Test Your React AppAll Things Open
 
full-stack-webapp-testing-with-selenium-and-rails.pdf
full-stack-webapp-testing-with-selenium-and-rails.pdffull-stack-webapp-testing-with-selenium-and-rails.pdf
full-stack-webapp-testing-with-selenium-and-rails.pdfBrian Takita
 
Enterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScriptEnterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScriptTroy Miles
 
Testing Ext JS and Sencha Touch
Testing Ext JS and Sencha TouchTesting Ext JS and Sencha Touch
Testing Ext JS and Sencha TouchMats Bryntse
 
Getting Started with Selenium
Getting Started with SeleniumGetting Started with Selenium
Getting Started with SeleniumDave Haeffner
 
How To Use Selenium Successfully
How To Use Selenium SuccessfullyHow To Use Selenium Successfully
How To Use Selenium SuccessfullyDave Haeffner
 
Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsLuís Bastião Silva
 
How To Use Selenium Successfully (Java Edition)
How To Use Selenium Successfully (Java Edition)How To Use Selenium Successfully (Java Edition)
How To Use Selenium Successfully (Java Edition)Sauce Labs
 
URUG Ruby on Rails Workshop - Sesssion 5
URUG Ruby on Rails Workshop - Sesssion 5URUG Ruby on Rails Workshop - Sesssion 5
URUG Ruby on Rails Workshop - Sesssion 5jakemallory
 
Java script unit testing
Java script unit testingJava script unit testing
Java script unit testingMats Bryntse
 
Migration strategies 4
Migration strategies 4Migration strategies 4
Migration strategies 4Wenhua Wang
 
Escaping Test Hell - ACCU 2014
Escaping Test Hell - ACCU 2014Escaping Test Hell - ACCU 2014
Escaping Test Hell - ACCU 2014Wojciech Seliga
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance PatternsStoyan Stefanov
 
Selenium Tips & Tricks - StarWest 2015
Selenium Tips & Tricks - StarWest 2015Selenium Tips & Tricks - StarWest 2015
Selenium Tips & Tricks - StarWest 2015Andrew Krug
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performancejeresig
 

Similar to jQuery Proven Performance Tips & Tricks (20)

How to use selenium successfully
How to use selenium successfullyHow to use selenium successfully
How to use selenium successfully
 
Mastering Test Automation: How to Use Selenium Successfully
Mastering Test Automation: How to Use Selenium Successfully Mastering Test Automation: How to Use Selenium Successfully
Mastering Test Automation: How to Use Selenium Successfully
 
jQuery Performance Tips and Tricks
jQuery Performance Tips and TricksjQuery Performance Tips and Tricks
jQuery Performance Tips and Tricks
 
The Many Ways to Test Your React App
The Many Ways to Test Your React AppThe Many Ways to Test Your React App
The Many Ways to Test Your React App
 
full-stack-webapp-testing-with-selenium-and-rails.pdf
full-stack-webapp-testing-with-selenium-and-rails.pdffull-stack-webapp-testing-with-selenium-and-rails.pdf
full-stack-webapp-testing-with-selenium-and-rails.pdf
 
Enterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScriptEnterprise Strength Mobile JavaScript
Enterprise Strength Mobile JavaScript
 
33rd degree
33rd degree33rd degree
33rd degree
 
Testing Ext JS and Sencha Touch
Testing Ext JS and Sencha TouchTesting Ext JS and Sencha Touch
Testing Ext JS and Sencha Touch
 
Getting Started with Selenium
Getting Started with SeleniumGetting Started with Selenium
Getting Started with Selenium
 
How To Use Selenium Successfully
How To Use Selenium SuccessfullyHow To Use Selenium Successfully
How To Use Selenium Successfully
 
Browser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.jsBrowser Automated Testing Frameworks - Nightwatch.js
Browser Automated Testing Frameworks - Nightwatch.js
 
How To Use Selenium Successfully (Java Edition)
How To Use Selenium Successfully (Java Edition)How To Use Selenium Successfully (Java Edition)
How To Use Selenium Successfully (Java Edition)
 
Selenium testing - Handle Elements in WebDriver
Selenium testing - Handle Elements in WebDriver Selenium testing - Handle Elements in WebDriver
Selenium testing - Handle Elements in WebDriver
 
URUG Ruby on Rails Workshop - Sesssion 5
URUG Ruby on Rails Workshop - Sesssion 5URUG Ruby on Rails Workshop - Sesssion 5
URUG Ruby on Rails Workshop - Sesssion 5
 
Java script unit testing
Java script unit testingJava script unit testing
Java script unit testing
 
Migration strategies 4
Migration strategies 4Migration strategies 4
Migration strategies 4
 
Escaping Test Hell - ACCU 2014
Escaping Test Hell - ACCU 2014Escaping Test Hell - ACCU 2014
Escaping Test Hell - ACCU 2014
 
JavaScript Performance Patterns
JavaScript Performance PatternsJavaScript Performance Patterns
JavaScript Performance Patterns
 
Selenium Tips & Tricks - StarWest 2015
Selenium Tips & Tricks - StarWest 2015Selenium Tips & Tricks - StarWest 2015
Selenium Tips & Tricks - StarWest 2015
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
 

Recently uploaded

CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistandanishmna97
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governanceWSO2
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuidePixlogix Infotech
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Zilliz
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxRemote DBA Services
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxRustici Software
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewDianaGray10
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceIES VE
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringWSO2
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data SciencePaolo Missier
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxFIDO Alliance
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard37
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Bhuvaneswari Subramani
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2
 

Recently uploaded (20)

CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
 
API Governance and Monetization - The evolution of API governance
API Governance and Monetization -  The evolution of API governanceAPI Governance and Monetization -  The evolution of API governance
API Governance and Monetization - The evolution of API governance
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
UiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overviewUiPath manufacturing technology benefits and AI overview
UiPath manufacturing technology benefits and AI overview
 
Decarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational PerformanceDecarbonising Commercial Real Estate: The Role of Operational Performance
Decarbonising Commercial Real Estate: The Role of Operational Performance
 
Choreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software EngineeringChoreo: Empowering the Future of Enterprise Software Engineering
Choreo: Empowering the Future of Enterprise Software Engineering
 
Design and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data ScienceDesign and Development of a Provenance Capture Platform for Data Science
Design and Development of a Provenance Capture Platform for Data Science
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptxJohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
WSO2 Micro Integrator for Enterprise Integration in a Decentralized, Microser...
 

jQuery Proven Performance Tips & Tricks

  • 1. jQuery Proven PERFORMANCE TIPS & TRICKS WITH ADDY OSMANI IMAGES COPYRIGHT HASBRO AND TONKA, 1935-2011. and Mr. Monopoly
  • 2. ABOUT ME • JavaScript & UI Developer at Aol • jQuery Core [Bugs/Docs/Learning] teams • SocketStream Core Team Member • Writer [Script Junkie / AddyOsmani.com/.net etc]
  • 3. We used to give out these awesome free coasters back in the 90s.
  • 4. We now create real-time web frameworks and next-gen platforms.
  • 6. WHY DOES PERFORMANCE MATTER? • 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.
  • 7. MORE WORK = MORE MEMORY USE = SLOWER APPS.
  • 8. TODAY, ALL OF THESE SLIDES COME WITH PERFORMANCE TESTS. Not just saying X is faster...we’re proving it too.
  • 9. 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!
  • 10. Example of test output Anyone can tell what the fastest and slowest snippets are. http://jsperf.com/jquery-tree-traversing
  • 11. 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.
  • 13. 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.
  • 14. MOST POPULAR SITES USING JQUERY ON THE GOOGLE CDN Old Stats from Scott Mitchell
  • 15. 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!
  • 16. 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.
  • 17. 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
  • 18. 1.6.x improvements .attr() performance improved .val() faster in 1.6.x http://jsperf.com/attr-vs-attrhooks http://jsperf.com/valhooks-vs-val/2
  • 19. 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
  • 21. 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?
  • 22. 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()).
  • 23. 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
  • 24. Slowest: Pseudo & Attribute Selectors $(‘: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
  • 25. 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.
  • 26. jsPerf selector comparison 1.4.2 1.6.2 ID Class Descendent tag Attributes Input/form select :nth-child 0 75000 150000 225000 300000 http://jsperf.com/dh-jquery-1-4-vs-1-6/6
  • 27. BUT I’M TOO PRETTY TO GO TO JAIL! Pseudo-selectors are powerful..but slow, so be careful when using them.
  • 28. The :hidden pseudo-selector if ( 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?
  • 29. 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!.
  • 30. 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
  • 32. UNDERSTAND PARENTS AND CHILDREN 1) $(‘.child", $parent).show(); //context 2) $parent.find(‘.child’).show(); //find() 3) $parent.children(".child’).show(); //immediate children 4) $(‘#parent > .child’).show(); //child combinator selector 5) $(‘#parent .child’).show(); //class selector 6) $('.child', $('#parent')).show(); //created context
  • 33. Context 1)  $(‘.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
  • 34. .find() 2)  $parent.find(‘.child’).show();   • This is the fastest of the entire set. I’ll explain why shortly.
  • 35. Immediate children 3)  $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
  • 36. CSS child combinator selector 4)  $(‘#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
  • 37. CSS class selector 5)  $(‘#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
  • 38. Created context 6)  $(‘.child’,  $(‘#parent’)).show();   • Equivalent internally to $(‘#parent’).find(‘.child’), however note that parent is a jQuery object. • ~23% slower than the fastest option
  • 39. 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.
  • 40. 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.
  • 41. jsPerf performance tests • context vs. selector vs. selector and .find() vs. parent/child selector vs. immediate children: http://jsperf.com/jquery- selectors-context/2
  • 43. Don’t use jQuery unless it’s absolutely 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..
  • 44. 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
  • 45. Why not use the DOM element 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.
  • 46. 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.
  • 47. 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.
  • 49. 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.
  • 50. 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.
  • 51. Doing just about anything with the cached collection. var foo = $(‘.item’).bind('click', function({         foo.not(this).addClass(‘bar’)                   .removeClass(‘foobar’)                   .fadeOut(500); });
  • 52. 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.
  • 54. CHAINING var 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!
  • 55. 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’);
  • 56. 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.
  • 58. 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)
  • 59. .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.
  • 60. .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.
  • 61. .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
  • 62. 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
  • 64. 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.
  • 65. 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.
  • 66. 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.
  • 67. 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.
  • 68. .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();       } });
  • 69. 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.
  • 70. 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.
  • 71. 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
  • 73. 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
  • 74. AVOID LOOPS IF YOU CAN. HARD, BUT NESTED DOM SELECTORS MAY PERFORM BETTER. • 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.
  • 75. 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.
  • 76. 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
  • 78. Avoid constructing new jQuery objects unless necessary $(‘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
  • 79. $.text vs $.fn.text http://jsperf.com/jquery-text-vs-html/5
  • 80. 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/
  • 82. 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.
  • 83. Let’s go through a quick example.. /*Let's store some default values to be read later*/ var defaultSettings = {}; defaultSettings['carModel']   = 'Mercedes'; defaultSettings['carYear’]    = 2012; defaultSettings['carMiles']   = 5000; defaultSettings['carTint']    = 'Metallic Blue';  
  • 84. 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('');  } });
  • 85. DRY code var 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 don't)     */          $.each(props,function(i,key){                $('#input_' + key).val(checked ? defaultSettings[key] : '');        }); });
  • 86. 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
  • 87. THAT’S IT! GO BUILD AWESOME THINGS.