.optimize(performance)
Andy Lindemann • @andymensional
Why?
Bad performance drives visitors away
As web apps replace the classic desktop
the user experience should be desktop-like
the user experience should be desktop-like
How to test
Speed test using
console.time(name)
and
console.timeEnd(name)
or websites like jsperf.com
Profiling using
console.profile(name)
and
console.profileEnd(name)
or Developer Tools profiling tab
Using the Developer Tools timeline can also be useful
Speed test example
console.time('fibonacci');
var fibo = [0,1], index = 0;
while(++index < 100000){
fibo.push(fibo[index] + fibo[index-1]);
}
console.timeEnd('fibonacci');
Profiling
Example:
Working with the DOM
Javascript works in another "box" than the DOM
→ communication is expensive
Avoid or minimize DOM manipulation whenever possible!
... but if you really have to
Work nicely with the DOM
Minimize DOM traversals by assigning frequently used nodes to variables (comparison)
When adding complex or nested content, build complete node in js, add to DOM once after everything is done.
Change the whole CSS class of an object at once instead of single style attributes.
Keep in mind that reflow takes its toll.
Basic rules
Mind the scoping chain.
Declare variables and functions where you need them
to avoid scope traversal.
Declare local references for frequently used objects
or their fields and functions.
jsperf link tbd
Basic rules
Stay type-save.
Set the type of your variables on initialization.
Use explicit type casting like toString() or parseInt()
for better performance and easier debugging.
for better performance and easier debugging.
jsperf link tbd as well
Basic rules
Always test, benchmark and use your brain.
Javascript evolves very fast
so don't trust any tips and tricks blindly.
Thank you for listening
If you have any questions, ask me.
I'll try to answer them
Javascript Performance Optimization
By andy lee
