Tweet
Tweet

Slide 1

Slide 1 text

Optimizing JS Apps to increase performance @mananbharara

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Why?

Slide 5

Slide 5 text

Misconceptions

Slide 6

Slide 6 text

Misconceptions Example

Slide 7

Slide 7 text

Misconceptions

Slide 8

Slide 8 text

Garbage Collection http://coding.smashingmagazine.com

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Misconceptions

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

WeakMap() Highly suitable for storing data in variables that may soon be dereferenced

Slide 15

Slide 15 text

WeakMap()

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

WeakMap()

Slide 18

Slide 18 text

WeakMap()

Slide 19

Slide 19 text

Singletons

Slide 20

Slide 20 text

Interaction with Foreign Objects http://desalasworks.com IndexedDB WebGL DOM

Slide 21

Slide 21 text

Interaction with Foreign Objects

Slide 22

Slide 22 text

Interaction with Foreign Objects

Slide 23

Slide 23 text

Interaction with Foreign Objects

Slide 24

Slide 24 text

Interaction with Foreign Objects

Slide 25

Slide 25 text

Interaction with Foreign Objects

Slide 26

Slide 26 text

Interaction with Foreign Objects

Slide 27

Slide 27 text

Interaction with Foreign Objects

Slide 28

Slide 28 text

Event binding etiquettes

Slide 29

Slide 29 text

Event binding etiquettes Command Line API - https://developer.chrome.com/devtools/docs/commandline-api

Slide 30

Slide 30 text

Event binding etiquettes

Slide 31

Slide 31 text

Event binding etiquettes setTimeout with clearTimeout Small callback functions: 2-3 ms to execute DOM caching to prevent re lookup

Slide 32

Slide 32 text

Event binding etiquettes Blog Example

Slide 33

Slide 33 text

String theory

Slide 34

Slide 34 text

String theory

Slide 35

Slide 35 text

String theory

Slide 36

Slide 36 text

Closures & Timers var myObj = { callMe: function () { var myRef = this; var val = setTimeout(function () { console.log('Time is running out!'); myRef.callMe(); }, 1000); } }; myObj.callMe();

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Profiling your application

Slide 39

Slide 39 text

Is it worth? - Memory Management Masterclass with Addy Osmani

Slide 40

Slide 40 text

github.com/mananbharara @mananbharara