2. Agenda
•Blocking and long running scripts
•Slow CSS Selectors on IE
•Too many XHR calls, requesting unnecessary data
•Expensive DOM Manipulations
•Leverage Event Delegation (event bubbling)
•Defer script loading and execution
3. Blocking and long running scripts
•Improve the Time to First Impression and Time to onLoad
•Script execution slows down the overall page load time
•Script blocks that execute longer than 20ms have potential for
improvement
4. Blocking and long running scripts
•First Impression
great if < 1s, acceptable if < 2.5s and slow if > 2.5s
•onLoad Event (DOM ready)
great if < 2s, acceptable if < 4s and slow if > 4s
•Fully Loaded (window load)
great if < 2s, acceptable if < 5s and slow if > 5s
(based on dynaTrace research)
6. Eliminate jQuery class Selectors
•Use Unique ID instead when possible
•Specify a Tag name if you have to use the Class Name
•Specify a parent context
•Store DOM lookup results you'll access repeatedly in variables
•Reduce the DOM Size
•Use the latest version of your framework
7. Eliminate jQuery class Selectors
//inefficient way to lookup for a specific classname
$('.dummyClass').doSomeManipulation();
//more efficient way, store the result in a variable
var anchors = $('#mainPanel').find('a.dummyClass');
anchors.doSomeManipulation();
12. Too many XHR calls,
requesting unnecessary data
•Don't use XHR calls within loops
•Make Ajax Cacheable - use GET for Ajax requests*
•Consider using passive requests vs. active requests
•Favour JSON over HTML or XML as your data exchange format
•Response should contain just the changed and relevant data
for the page which is being updated*
* Need some backend support
Read more here: High Performance JavaScript – chapter 7 (O’Reilly 2010)
14. Expensive DOM Manipulations
•Perform DOM manipulations off the document to minimize
DOM access
•Use strings and innerHTML property to speed up
large DOM insertions
•Batch CSS changes to minimize repaint/reflow
15. Expensive DOM Manipulations
//adds element to DOM and then does the manipulation
$('<div />').appendTo(someElement).doSomeManipulation();
//manipulates the element fragment before adding to the DOM
$('<div />').doSomeManipulation().appendTo(someElement);
16. Batch CSS changes
//inefficient way of modifying the same property
$(myElement).css(’color’, ‘red’);
currentHeight = getHeight();
$(myElement).css(’height’, currentHeight );
currentWidth = getWidth();
$(myElement).css(’width’, currentWidth);
//better way to do the same
currentHeight = getHeight();
currentWidth = getWidth();
$(myElement).css({
color: ‘red’,
height: currentHeight,
width: currentWidth
});
18. Event Delegation
•Fewer functions to manage
•Takes up less memory
•Fewer ties between your code and the DOM
•No need to re-attach handlers after a DOM update
•Together with namespaces can consolidate all events into a nicer
centralized package
•The blur, focus, load and unload events don't bubble like other events
•mouseover and mouseout are difficult to handle via event delegation
due to their nature
19. Event Delegation with jQuery
•.live() provides extra functionality by walking up the DOM to match
possible ancestors
•.delegate() attaches a handler to one or more events for all elements that
match the selector, now or in the future, based on a specific set of root
elements
•event.stopPropagation() prevents the event from bubbling to ancestor
•event.stopImmediatePropagation() keeps the rest of the handlers from
being executed and prevents the event from bubbling up the DOM
20. Event Delegation with jQuery
//common way to add event handlers
$('.button').mouseover(function() {
$(this).addClass('hover');
}).mouseout(function() {
$(this).removeClass('hover');
});
//event delegation usage (also with event namespace)
$('#page').bind(’mouseover.buttonHover mouseout.buttonHover', function (event) {
var currentTrigger = $(event.target);
if (currentTrigger.hasClass('button')) {
event.stopPropagation();
currentTrigger.toggleClass('hover');
}
});
21. Defer script loading and execution
•$(document).ready occurs during page render while objects are still
downloading
•defer execution of unnecessary and runtime expensive scripts to
$(window).load event
22. Defer script loading and execution
$(document).ready(function () {
//execute here the scripts which are necessary
//for the page to be drawn correctly
equalHeights();
insertAjaxContent();
});
$(window).load(function () {
//execute here the scripts which can be deferred
preloadImages();
activateAccordion();
activateLightbox();
});
25. Links
•Best Practices on JavaScript and AJAX Performance
https://community.dynatrace.com/community/display/PUB/Best+Practices+on+JavaScript+and+AJA
X+Performance
•jQuery Performance Rules
http://www.artzstudio.com/2009/04/jquery-performance-rules/
•Top 10 Client-Side Performance Problems in Web 2.0
http://blog.dynatrace.com/2010/08/25/top-10-client-side-performance-problems-in-web-2-0/
•Ajax Best Practices: Reduce and Aggregate similar XHR calls
http://blog.dynatrace.com/2010/08/12/ajax-best-practices-reduce-and-aggregate-similar-xhr-calls/
•Event delegation in JavaScript
http://www.nczonline.net/blog/2009/06/30/event-delegation-in-javascript/
Notas do Editor
The goal of a page must be to download all resources as fast as possible in order to improve the Time to First Impression and Time to onLoad.
Long running JavaScript executed when the file is loaded cause the browser to suspend download of remaining network resources and therefore slows down the overall page load time.
Script blocks that execute longer than 20ms are considered to have potential for improvement.
First Impression - great if < 1s, acceptable if < 2.5s and slow if > 2.5sThis is the time from when the URL is entered into the browser until the user has the first visual indication of the page that gets loaded.
onLoad Event - great if < 2s, acceptable if < 4s and slow if > 4sThis is the time until the browser triggers the onLoad event which happens when the initial document and all referenced objects are fully downloaded.
Fully Loaded - great if < 2s, acceptable if < 5s and slow if > 5sThis is the time until all onLoad JavaScript handlers have finished their execution and all dynamically or delay loaded content triggered by those handlers has been retrieved.
As the getElementsByClassName method is missing in IE 6 and 7, frameworks like jQuery simulate this functionality by iterating through the whole DOM and checking every single DOM element whether it matches the class name of not. Depending on the size of the DOM this can become a very lengthy operation.
A mistake that is often made is that too much information is fetched dynamically with too many calls. Browser only has a limited number of physical network connections it opens to each domain (2 parallel connections recommended by HTTP 1.1). When you make a lot of AJAX calls in IE 6&7, the browser keeps all the requests in a queue and executes two at a time. So, if you click on something to try to navigate to another page, the browser has to wait for running calls to complete before it can take another one.
JSON: lightweight, trivial to parse to a JavaScript data structure
HTML: easy to inject to the page
DOM manipulation is a common performance bottleneck in rich web applications. Changing the class name on the body tag causes the browser to re-evaluate all elements on the page to find out if the reflow or repaint process should re-run.
A DOM tree – representation of the page structure
A render tree – representation of how the DOM nodes will be displayed
Repaint –When a DOM change affects the style of an element
Reflow – When a DOM change affects the geometry of an element
Traditional event handlers are inefficient. They can potentially cause of memory leaks and performance degradation - the more you have, the greater the risk. Event delegation improves the overall performance of large-scale web applications.
If you notice your page stalling while loading, all those $(document).ready functions could be the reason why. You can reduce CPU utilization during the page load by binding your jQuery functions to the $(window).load event, which occurs after all objects called by the HTML (including <iframe> content) have downloaded. Functionality such as drag and drop, binding visual effects and animations, pre-fetching hidden images, etc., are all good candidates for this technique.
