Optimizing JS Apps to increase performance

Presented at the ThoughtWorks Werkstatt in Berlin as part of a meetup.

This talk will discuss how we can scale heavy JS applications without them becoming non-performant. With increasing capabilities of modern web browsers, different frameworks allow developers to do more with less amount of code. This however, may lead to situations in which the code written is not very efficient and may lead to performance bottlenecks upon scaling.

Transcript

1. Optimizing JS Apps to increase performance @mananbharara
2. Why? “Whereas early web sites used JavaScript to perform simple tasks, the language is now used to run the entire user interface in many places.” “The best way to ensure a fast, enjoyable user interface is to write JavaScript as efficiently as possible for all browsers.” - Even faster websites, O’Reilly
3. Why? “Whereas early web sites used JavaScript to perform simple tasks, the language is now used to run the entire user interface in many places.” “The best way to ensure a fast, enjoyable user interface is to write JavaScript as efficiently as possible for all browsers.” - Even faster websites, O’Reilly
4. Why?
5. Misconceptions
6. Misconceptions Example
7. Misconceptions
8. Garbage Collection http://coding.smashingmagazine.com
9. Garbage Collection “Only if something does not have a retaining path to the root node, it is garbage” - Google I/O 2013 - A Trip Down Memory Lane with Gmail
10. Garbage Collection “Only if something does not have a retaining path to the root node, it is garbage” root object Node scalar Node - Google I/O 2013 - A Trip Down Memory Lane with Gmail
11. Garbage Collection “Only if something does not have a retaining path to the root node, it is garbage” root object Node scalar Node {...} - Google I/O 2013 - A Trip Down Memory Lane with Gmail
12. Misconceptions
14. WeakMap() Highly suitable for storing data in variables that may soon be dereferenced
15. WeakMap()
16. WeakMap() • Weak reference to keys and values • new WeakMap().keys • k 㱺 v, k must be an Object • k 㱺 v, if k is reachable then v is reachable Non enumerable
17. WeakMap()
18. WeakMap()
19. Singletons
20. Interaction with Foreign Objects http://desalasworks.com IndexedDB WebGL DOM
21. Interaction with Foreign Objects
22. Interaction with Foreign Objects
23. Interaction with Foreign Objects
24. Interaction with Foreign Objects
25. Interaction with Foreign Objects
26. Interaction with Foreign Objects
27. Interaction with Foreign Objects
28. Event binding etiquettes
29. Event binding etiquettes Command Line API - https://developer.chrome.com/devtools/docs/commandline-api
30. Event binding etiquettes
31. Event binding etiquettes setTimeout with clearTimeout Small callback functions: 2-3 ms to execute DOM caching to prevent re lookup
32. Event binding etiquettes Blog Example
33. String theory
34. String theory
35. String theory
36. Closures & Timers var myObj = { callMe: function () { var myRef = this; var val = setTimeout(function () { console.log('Time is running out!'); myRef.callMe(); }, 1000); } }; myObj.callMe();
37. Closures & Timers var run = function () {
 var str = new Array(1000000).join('*');
 var doSomethingWithStr = function () {
 if (str === 'something')
 console.log("str was something");
 };
 doSomethingWithStr();
 var logIt = function () {
 console.log('interval');
 };
 setInterval(logIt, 100);
 };
 setInterval(run, 1000); - http://point.davidglasser.net/2013/06/27/surprising-javascript-memory-leak.html
38. Profiling your application
39. Is it worth? - Memory Management Masterclass with Addy Osmani
40. github.com/mananbharara @mananbharara