1. JavaScript Performance
Tips
SHAKTI SHRESTHA
shakti.shrestha@gmail.com

2. 1. Define local variables
When a variable is referenced, JavaScript hunts it down by looping
through the different members of the scope chain (nesting of
object).
Simply, the deeper the engine has to dig into this scope chain, the
longer the operation will take.
Since local variables are first in this chain, they’re always faster than
globals. So anytime you use a global variable more than once you
should redefine it locally

3. 1. Define local variables
Difference

4. 2. Use closures as less as possible
Also can be called as inline function.

JavaScript treats a function as an object.
It causes a huge performance hit.

5. 2. Use closures as less as possible
What we do mostly What is good
Code using closure
Refer to a function
Common event handler

6. 2. Use closures as less as possible
http://jsperf.com/javascript-performance-02

7. 3. Object properties and array items are
slower
 When you reference an object property or array item multiple
times
You can get a performance boost by defining a variable.
This applies to both reading and writing data.
Similarly don't dig too deep into array.
It cause a performance hit.
If you constantly reference foo.bar you can get a performance
boost by defining var bar = foo.bar;

8. 3. Object properties and array items are
slower
What we do mostly What is good
Referring through deep nest
Improved method

9. 3. Object properties and array items are
slower
http://jsperf.com/javascript-performance-03

10. 4. Avoid function based iteration
 To allow function based looping, the iteration setups up a function
for each item in the loop which causes a performance issue.
 In javascript a function = an object.

11. 4. Avoid function based iteration
Function based iteration Normal For loop
Function based iteration. Classic For loop.

12. 4. Avoid function based iteration
http://jsperf.com/javascript-performance-04

13. 5. Always Descend From an #id
 The fastest selector in jQuery is the ID selector ($('#someId')).
 This is because it maps directly to a native JavaScript method,
getElementById().
 Selecting multiple elements means:
DOM traversal and looping
something that is slow.
To minimize the performance hit, always descend from the closest
parent ID.

14. 5. Always Descend From an #id
Not good Good
NG
OK

15. 5. Always Descend From an #id
http://jsperf.com/javascript-performance-05

16. 5. Always Descend From an #id
http://jsperf.com/javascript-performance-05-01

17. 6. Cache jQuery Objects
 Set a reference of the jQuery object to a variable.
 var $active_light = $('#traffic_light input.on');
 As a standard set $ as prefix of jQuery object
(can be quickly identified as jQuery object)
var $active_light

18. 6. Cache jQuery Objects
jQuery object NOT cached jQuery object cached
Object Not Cached Object Cached

19. 6. Cache jQuery Objects
http://jsperf.com/javascript-performance-06

20. 7. Harness the Power of Chaining
 Less code
 Better organized

21. 7. Harness the Power of Chaining
jQuery object cached only jQuery object cached & chaining
Using cached object Chaining

22. 8. Use Sub-queries
 JavaScript allows us to run additional selector operations on a
wrapped set.
 This reduces performance overhead on subsequent selections
 Reason we already grabbed and stored the parent object in a local variable
(aka object caching).

23. 8. Use Sub-queries
Using query selector Object caching & sub-queries
jQuery & query selector Sub-queries
JavaScript & query selector JavaScript & Sub-queries

24. 8. Use Sub-queries
http://jsperf.com/javascript-performance-08

25. 9. Limit Direct DOM Manipulation
DOM operations are resource-heavy because of reflow.
Reflow is basically the process by which the browser re-renders the DOM elements
on the screen.
For instance, if you change the width of a div with JavaScript, the browser has to
refresh the rendered page to account for this change.
The basic idea here is to create exactly what you need in memory, and then
update the DOM.
This is not a jQuery best practice, but a must for efficient JavaScript.

26. 9. Limit Direct DOM Manipulation

27. 9. Limit Direct DOM Manipulation
http://jsperf.com/javascript-performance-09

28. 9. Limit Direct DOM Manipulation
Another good option is using documentFragment
For detail on use of documentFragment please check below link
http://ejohn.org/blog/dom-documentfragments/

29. 10. Leverage Event Delegation
Also known as Bubbling
 When an event is triggered on an element,
for example, a mouse click on a button,
the same event is also triggered on all of that element’s ancestors.
This process is known as event bubbling

30. 10. Leverage Event Delegation

31. 10. Leverage Event Delegation
What we generally do Event Delegation
Query selector
Event delegate

32. 10. Leverage Event Delegation
http://jsperf.com/javascript-performance-10

33. References:
http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-
nicholas-zakas
http://www.artzstudio.com/2009/04/jquery-performance-rules/#descend-
from-id
 http://ejohn.org/blog/dom-documentfragments/
 http://www.yuiblog.com/blog/2006/04/11/with-statement-considered-
harmful/
http://www.developer.nokia.com/Community/Wiki/JavaScript_Performance_B
est_Practices

34. Thank You