Understanding javascript event loop, memory management and loops execution. Helps in improving JS code performance to a greater extent. tips for faster jQuery selection, caching and DOM access

1. !Slow JS
A Programmer is to a Coder, to what a Designer is to a Production Artist…

2. Advanced
Intermediate
Beginner
Target Audience

3. • Data structure
 Object vs Array
• Memory management
 Scope chain
 Data access
 De-referencing
• JS event loop
 Event loop
 setTimeout/setInterval
• Loops
 Faster loops
• UI rendering(jQuery)
 jQuery selectors
 Minimize reflow
• Chrome developer tool
Agenda

4. Object vs Array
// optimized, length=3, index lookup
var a= [10,20,30];
//sparse array, length = 9, output: [undefined × 4, 44, undefined × 3, 55]
var b = []; b[4]= 44, b[8]=55;
//holed array, length=2, not good
var c = [21,22,23]; c[1]= null; delete c[2];
visit code samples

5. Memory management
 Scope chain
 Data access
 Functions

6. Scope Chain
Golden rule: Further into the chain slower the resolution
Things to read; with, try/catch, clousure
Execution Context
Scope
Scope Chain
0
1
Activation Object
this window
agruments [item]
Item {array}
div undefined
Global
document {object}
window {object}

7. Data Access
I am faster
Literals or local
variables > object
property access
root.foo.name >
root.foo.item.name

8. Functions
avoids unnecessarily running the initialization code

9. JS Event Loop
 Event loop
 setTimeout/setInterval

10. Event Loop
 single thread == one task at a time
 Non-Preemption
 Runtime contains a message queue. A function is
associated to each message.
 When the stack is empty, a message is taken out
of the queue and processed.

11. setTimeout/setInterval
• Puts execution at the end of the event queue.
• Timeout, in milliseconds, it will wait before putting to
queue.
• Doesn’t guarantee to execute the function just after
the timeout passed.

12. Faster Loops
• Reduce lookup
• Control condition + control variable
• Avoid for-in or for-each loop
Increaseinperformance

13. UI Rendering(jQuery)
 jQuery selectors
 Minimize reflow

14. jQuery Selectors
• Use IDs
• Give context
• Cache always

15. Reflow
Reflow is the process by which the geometry of the layout engine’s formatting
objects are computed.
-Chris Waterson, Mozilla
Dom manipulation is heavy
Do DOM manipulations off the document.
Change CSS, not styles

16. THANKS!!