JavaScript Performance Considerations

JavaScript Performance Considera4ons

Overview •  Performance has a higher priority on the
client •  Less/No control of client machine conﬁgura8on •  JavaScript is interpreted each 8me the page loads •  Too much being pushed to the client side •  Browsers being pushed to their limits

Steps To Improve Performance 1.  Write less code
2.  Minimize perceived load 8mes 3.  Increase perceived responsiveness 4.  Cache back-‐end responses 5.  Play to the browsers strengths 6.  Be as speciﬁc as possible in DOM selec8on 7.  Render ini8al page as sta8cally as possible 8.  Beware of aliases 9.  Proﬁle oUen

Write Less Code

Write Less Code •  More code means more to
download and execute •  Ini4al parsing of JavaScript is a major boCleneck •  Don’t rely on browser caching to excuse code bloat •  Strip debugging code and OO boilerplate •  Minimize dependency on 3rd Party Frameworks < 500kb of JavaScript (uncompressed)

952 118 127 177 97 237 381 119 263 403
323 373 382 0 100 200 300 400 500 600 700 800 900 1000 jQuery 1.3.2 Prototype 1.6.0.3 Ext 3.0 (Core) Ext 2.2 (All) MooTools 1.2.2 (Core) MooTools 1.2.2 (All) Microsoft Ajax Size (kb) Write Less Code Balance 3rd party oﬀerings with custom code Bloat Threshold

Minimize Perceived Load Times

Minimize Perceived Load Times •  Minimize JavaScript and CSS
sent from server •  Place CSS at the top of the page •  Place JavaScript at the bo[om of the page •  Complex screens should be masked while loading •  Oﬀer constant feedback •  Load lazily or “on demand”

Minimize Perceived Load Times Loading Styles… Loading Scripts… Loading
Styles… Further scripts loaded on demand Ini4al styles loaded Ini4al scripts loaded Loading screen removed

Minimize Perceived Load Times <html> <head></head> <body>
<div id=“msg”>Loading 1st Library</div> <script src=“ﬁrstLibrary.js”></script> <script> var msg = document.getElementById(‘msg’); msg.innerHTML = “Loading Second Library”; </script> <script src=“secondLibrary.js”></script> <script> msg.parentNode.removeChild(msg); </script> </body> </html>

Increase Perceived Responsiveness

Increase Perceived Responsiveness •  Do as li[le work as
possible •  Use setTimeout() or Chunking to allow UI updates •  Use “sooner” events •  Bind directly to inline events instead of event listeners •  Delegate mul8 element events

Increase Perceived Responsiveness tr1.onclick = clickHandler; tr2.onclick =
clickHandler; ... ... trN.onclick = clickHandler; table.onclick = func4on(e){ if(e.target.nodeName == “tr”){ clickHandler(e); } } Per element Delega8on

Cache Back End Responses

Cache Back End Responses •  Data requests should go
through a Data Manager •  Cache frequent sta8c responses •  Manage cache using HEAD requests •  Use range caches for large data sets (autocomplete) •  Balance local updates with refetching

Cache Back End Responses Data Manager Data Manager
100 101 100 101

Play To The Browsers Strengths

Play To The Browsers Strengths •  Avoid DOM manipula8on;
use innerHTML where appropriate •  Reduce dynamic CSS defini8ons in JavaScript •  Avoid reflow •  Do DOM work off-‐DOM and insert at end •  Be aware of the best performing techniques •  Use JSON over XML where possible

Play To The Browsers Strengths

Be Speciﬁc

Be Speciﬁc •  Be speciﬁc as possible when working
with the DOM •  Use ID’s getElementByID where possible •  Use getElementsByTagName and selectorQueryAll if available •  Use a fast 3rd party selector engine for complex queries – Sizzle, Peppy, LLamaLabs Selector, Sly, base2, YUI Selector But be aware of browser quirks!

Be Speciﬁc

Render Ini4al Page Sta4cally

Render Ini4al Page Sta4cally •  Don’t be tempted to
start with a blank page and use JavaScript to build page •  Put as much sta8c content on the page as possible •  Reduces number of server round trips •  Set ini8al page state sta8cally (visibility etc.) •  Embed smaller data as JSON or XML

Beware of Aliases

Beware of Aliases var $ = document.getElementById; func4on
checkEl(id){ if($(id) && ! $(id).checked){ $(id).checked = true; } } checkEl("somelist"); •  Results in 3 calls to DOM methods •  Common mistake when using 3rd party libraries such as Prototype and jQuery

Proﬁle Oben

Profile Oben •  Profile oUen; use Firebug, IE8 Developer
Tools, Safari & Chrome Developer Tools, Opera’s Dragonfly, Timestamp diffs or just comment out code to iden8fy bo[lenecks •  Measure in a consistent environment, restart browser, clear cache etc. •  Take averages of runs to normalise results •  Define responsiveness as early as possible

Conclusion

Conclusion •  Do as much on the server as
possible •  Avoid pushing needless tasks to the client •  Priori8se performance on the client •  Review and proﬁle oUen Know your enemy!

Ques4ons?

JavaScript Performance Considerations

JavaScript Performance Considerations

James Hughes

More Decks by James Hughes

Other Decks in Programming

Featured

Transcript

JavaScript Performance Considera4ons

Overview •  Performance has a higher priority on the

Steps To Improve Performance 1.  Write less code

Write Less Code

Write Less Code •  More code means more to

952 118 127 177 97 237 381 119 263 403

Minimize Perceived Load Times

Minimize Perceived Load Times •  Minimize JavaScript and CSS

Minimize Perceived Load Times Loading Styles… Loading Scripts… Loading

Minimize Perceived Load Times <html> <head></head> <body>

Increase Perceived Responsiveness

Increase Perceived Responsiveness •  Do as li[le work as

Increase Perceived Responsiveness tr1.onclick = clickHandler; tr2.onclick =

Cache Back End Responses

Cache Back End Responses •  Data requests should go

Cache Back End Responses Data Manager Data Manager

Play To The Browsers Strengths

Play To The Browsers Strengths •  Avoid DOM manipula8on;

Play To The Browsers Strengths

Be Speciﬁc

Be Speciﬁc •  Be speciﬁc as possible when working

Be Speciﬁc

Render Ini4al Page Sta4cally

Render Ini4al Page Sta4cally •  Don’t be tempted to

Beware of Aliases

Beware of Aliases var $ = document.getElementById; func4on

Proﬁle Oben

Proﬁle Oben •  Proﬁle oUen; use Firebug, IE8 Developer

Conclusion

Conclusion •  Do as much on the server as

Ques4ons?