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

Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012Nicholas Zakas
 
Automated Frontend Testing
Automated Frontend TestingAutomated Frontend Testing
Automated Frontend TestingNeil Crosby
 
Automated Testing With Watir
Automated Testing With WatirAutomated Testing With Watir
Automated Testing With WatirTimothy Fisher
 
Join the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.jsJoin the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.jsSeth McLaughlin
 
Developing Modern Java Web Applications with Java EE 7 and AngularJS
Developing Modern Java Web Applications with Java EE 7 and AngularJSDeveloping Modern Java Web Applications with Java EE 7 and AngularJS
Developing Modern Java Web Applications with Java EE 7 and AngularJSShekhar Gulati
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011Nicholas Zakas
 
Introduction To Ruby Watir (Web Application Testing In Ruby)
Introduction To Ruby Watir (Web Application Testing In Ruby)Introduction To Ruby Watir (Web Application Testing In Ruby)
Introduction To Ruby Watir (Web Application Testing In Ruby)Mindfire Solutions
 
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...Alan Richardson
 
What you can do In WatiR
What you can do In WatiRWhat you can do In WatiR
What you can do In WatiRWesley Chen
 
Choosing a Javascript Framework
Choosing a Javascript FrameworkChoosing a Javascript Framework
Choosing a Javascript FrameworkAll Things Open
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Libraryjeresig
 
Test automation & Seleniun by oren rubin
Test automation & Seleniun by oren rubinTest automation & Seleniun by oren rubin
Test automation & Seleniun by oren rubinOren Rubin
 
Learn about Eclipse e4 from Lars Vogel at SF-JUG
Learn about Eclipse e4 from Lars Vogel at SF-JUGLearn about Eclipse e4 from Lars Vogel at SF-JUG
Learn about Eclipse e4 from Lars Vogel at SF-JUGMarakana Inc.
 
Selenium Automation Using Ruby
Selenium Automation Using RubySelenium Automation Using Ruby
Selenium Automation Using RubyKumari Warsha Goel
 
watir-webdriver
watir-webdriverwatir-webdriver
watir-webdriverjariba
 
Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptjeresig
 
Testing nightwatch, by David Torroija
Testing nightwatch, by David TorroijaTesting nightwatch, by David Torroija
Testing nightwatch, by David TorroijaDavid Torroija
 
Fullstack End-to-end test automation with Node.js, one year later
Fullstack End-to-end test automation with Node.js, one year laterFullstack End-to-end test automation with Node.js, one year later
Fullstack End-to-end test automation with Node.js, one year laterMek Srunyu Stittri
 
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)Joseph Chiang
 

What's hot (20)

Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
 
Automated Frontend Testing
Automated Frontend TestingAutomated Frontend Testing
Automated Frontend Testing
 
Automated Testing With Watir
Automated Testing With WatirAutomated Testing With Watir
Automated Testing With Watir
 
Join the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.jsJoin the darkside: Selenium testing with Nightwatch.js
Join the darkside: Selenium testing with Nightwatch.js
 
Developing Modern Java Web Applications with Java EE 7 and AngularJS
Developing Modern Java Web Applications with Java EE 7 and AngularJSDeveloping Modern Java Web Applications with Java EE 7 and AngularJS
Developing Modern Java Web Applications with Java EE 7 and AngularJS
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
 
Introduction To Ruby Watir (Web Application Testing In Ruby)
Introduction To Ruby Watir (Web Application Testing In Ruby)Introduction To Ruby Watir (Web Application Testing In Ruby)
Introduction To Ruby Watir (Web Application Testing In Ruby)
 
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
Hands on Exploration of Page Objects and Abstraction Layers with Selenium Web...
 
What you can do In WatiR
What you can do In WatiRWhat you can do In WatiR
What you can do In WatiR
 
Choosing a Javascript Framework
Choosing a Javascript FrameworkChoosing a Javascript Framework
Choosing a Javascript Framework
 
Building a JavaScript Library
Building a JavaScript LibraryBuilding a JavaScript Library
Building a JavaScript Library
 
Test automation & Seleniun by oren rubin
Test automation & Seleniun by oren rubinTest automation & Seleniun by oren rubin
Test automation & Seleniun by oren rubin
 
End-to-end testing with geb
End-to-end testing with gebEnd-to-end testing with geb
End-to-end testing with geb
 
Learn about Eclipse e4 from Lars Vogel at SF-JUG
Learn about Eclipse e4 from Lars Vogel at SF-JUGLearn about Eclipse e4 from Lars Vogel at SF-JUG
Learn about Eclipse e4 from Lars Vogel at SF-JUG
 
Selenium Automation Using Ruby
Selenium Automation Using RubySelenium Automation Using Ruby
Selenium Automation Using Ruby
 
watir-webdriver
watir-webdriverwatir-webdriver
watir-webdriver
 
Performance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScriptPerformance, Games, and Distributed Testing in JavaScript
Performance, Games, and Distributed Testing in JavaScript
 
Testing nightwatch, by David Torroija
Testing nightwatch, by David TorroijaTesting nightwatch, by David Torroija
Testing nightwatch, by David Torroija
 
Fullstack End-to-end test automation with Node.js, one year later
Fullstack End-to-end test automation with Node.js, one year laterFullstack End-to-end test automation with Node.js, one year later
Fullstack End-to-end test automation with Node.js, one year later
 
From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)From Hacker to Programmer (w/ Webpack, Babel and React)
From Hacker to Programmer (w/ Webpack, Babel and React)
 

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
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionPaul Irish
 
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
 

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
 
jQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & CompressionjQuery Anti-Patterns for Performance & Compression
jQuery Anti-Patterns for Performance & Compression
 
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
 

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

Fact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsFact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsZilliz
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsNathaniel Shimoni
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersNicole Novielli
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demoHarshalMandlekar2
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 

Recently uploaded (20)

Fact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMsFact vs. Fiction: Autodetecting Hallucinations in LLMs
Fact vs. Fiction: Autodetecting Hallucinations in LLMs
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Time Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directionsTime Series Foundation Models - current state and future directions
Time Series Foundation Models - current state and future directions
 
A Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software DevelopersA Journey Into the Emotions of Software Developers
A Journey Into the Emotions of Software Developers
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Sample pptx for embedding into website for demo
Sample pptx for embedding into website for demoSample pptx for embedding into website for demo
Sample pptx for embedding into website for demo
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 

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.