19. The High-Performance JS Mantra
• Be Lazy : Nothing is faster than doing nothing
• Be Responsive
• Be Vigilant
PhpXperts Seminar 2010
20. Be Lazy: Nothing is faster than doing nothing
• Write less code
• Frequent code releases
Frequently re-download
• More code = more to
download, execute, maintain,
etc
PhpXperts Seminar 2010
21. Be Lazy: Nothing is faster than doing nothing
• Before:
• After:
PhpXperts Seminar 2010
/**
* The dom module provides helper methods for
* manipulating Dom elements.
* @module dom
*
*/
(function() {
var Y = YAHOO.util, // internal shorthand
getStyle, // for load time browser branching
setStyle, // ditto
propertyCache = {}, // for faster hyphen converts
reClassNameCache = {}, // cache regexes for className
document = window.document; // cache for faster lookups
YAHOO.env._id_counter = YAHOO.env._id_counter || 0;
(function(){var
B=YAHOO.util,K,I,J={},F={},M=window.document;YAHOO.env._id_counter=YAHOO.en
v._id_counter||0;
MINIFY = Good
22. Be Lazy: Nothing is faster than doing nothing
• Load JS on-demand
• Less HTTP Requests
Before:
After:
PhpXperts Seminar 2010
<script src="all.js“ type="text/javascript“></script>
<script src="jquery.js"></script>
<script src="jquery.twitter.js"></script>
<script src="jquery.cookie.js"></script>
<script src="myapp.js"></script>
23. Be Lazy: Nothing is faster than doing nothing
• Draw UI as late as possible
Draw less DOM = faster
Pre-draw hidden UI = No
Cache = Yes
Hidden UI updating = No
PhpXperts Seminar 2010
29. The High-Performance JS Mantra
• Be Lazy
• Be Responsive: Jump when the user says
jump
• Be Vigilant
PhpXperts Seminar 2010
30. Be Responsive: Jump when the user says jump
• Minimize initial load time
CSS at top
JS at bottom
UI placeholder > “loading”
Load in stages
• Yield early and often
do min. work, use setTimeout() to yield
PhpXperts Seminar 2010
31. Be Responsive: Jump when the user says jump
PhpXperts Seminar 2010
Load your app in stages
32. Be Responsive: Jump when the user says jump
PhpXperts Seminar 2010
Load your app in stages
33. Be Responsive: Jump when the user says jump
PhpXperts Seminar 2010
Load your app in stages
34. Be Responsive: Jump when the user says jump
PhpXperts Seminar 2010
Load your app in stages
35. Be Responsive: Jump when the user says jump
PhpXperts Seminar 2010
Load your app in stages
36. Be Responsive: Jump when the user says jump
PhpXperts Seminar 2010
Load your app in stages
37. Be Responsive: Jump when the user says jump
PhpXperts Seminar 2010
Load your app in stages
38. The High-Performance JS Mantra
• Be Lazy
• Be Responsive
• Be Vigilant: Only you can prevent slow web apps
PhpXperts Seminar 2010
39. Be Vigilant: Only you can prevent slow web apps
• Profile like crazy
Use firebug’s profiler (Joe Hewitt, you rule! )
Use timestamp diffs and alerts
PhpXperts Seminar 2010
42. References
JavaScript: The World's Most Misunderstood Programming Language
Private Members in JavaScript
Books:
JavaScript: The Good Part by Douglus Crockford
JavaScript: The Definitive Guide (5th Edition) by David Flanagan
jQuery Cheat sheet
Server side JS
PhpXperts Seminar 2010
Notes de l'éditeur
When it comes to Object Oriented issue:
it does have constructors which do what classes do, including acting as containers for class variables and methods.
It does not have class-oriented inheritance, but it does have prototype-oriented inheritance.
The two main ways of building up object systems are by inheritance (is-a) and by aggregation (has-a). JavaScript does both
Capable of information hiding
JavaScript objects can have private variables and private methods
JavaScript supports not only classical inheritance, but other code reuse patterns as well.
While JavaScript is most widely used for client side scripting in a browser, it is a fully fledged language and can be used anywhere.
Cross platform mobile apps development for JavaScript developers
A JavaScript library is like a toolbox You can build any number of things using the tools
Write less code
Each line costs parsing time
Can’t rely on browser caching to excuse large code size
Yahoo study: surprising number of hits with empty cache
Frequent code releases frequently need to re-download
You just saved 3 HTTP requests
Draw UI as late as possible
Draw less DOM = faster to draw, browser less saturated
Never pre-draw hidden UI if you can avoid it
Cache previously drawn HTML when appropriate
But have to know when to invalidate the cache
Don’t keep hidden UI up-to-date behind the scenes
Just re-draw next time you show it (simpler, one-time cost)
Put CSS at the top of your page and JS at the bottom
Draw major placeholder UI with “loading…” first
Load / draw your app in stages (lazy, on-demand)