why performance

Array

push vs assign

var a = [];

for (var i = 0; i<10000; i++){
   a.push(i);
}
							

var b = [];

for (var i = 0; i<10000; i++){
   b[i] = i;
}
							

Push multiple

var a = [1, 2];
a.push(3, 4, 5);

a; // [1, 2, 3, 4, 5]
							

var b = [1, 2, 3, 4, 5, ...];
b.indexOf(669);
								

b.indexOf(669, 500);
								

Perf Tip -1

• a[i]=5 is faster a.push(5)
• push can insert multiple
• consider fromIndex if possible

Global Variable

• Local variable

global scope

var a = 2;
							

local variable

function foo(){

   var b = 21;
}
							

var a = 2; 

function foo(){
   var b = 21;
   return a + b;
}
							

local/function scope

access again and again

var a = 99;

function useGlobal() {    
    for (j = 0; j < 1000000; j++){
        console.log(a);
    }
}
							

var a = 99;
function useLocal() {
    var localA = a;
    for (var k = 0; k < 1000000; k++){
        console.log(localA);
    }
}
							

Perf Tip -2

Cache out of scope variable

is it hard to

Improve

Performance?

Events

event delegate

<ul id="listToDestroy">
    <li><a href="#">first item</a></li>
    <li><a href="#">second item</a></li>
    <li><a href="#">third item</a></li>
    <li><a href="#">forth item</a></li>
    <li><a href="#">Fifth item</a></li>
</ul>

var el = document.getElementById('listToDestroy');

el.addEventListener('click', function (e) {
    var elm = e.target.parentNode;
    elm.parentNode.removeChild(elm);
    e.preventDefault();
});
							

event delegate (demo)

• first item
• second item
• third item
• forth item
• Fifth item

Perf Tip -3

Delegate Events

Debounce & Throttle

Defer

Perf Tip -3.5

Throttle Events

3.5 Perf Tips

1. Array
   • a[i]=5 is faster a.push(5)
   • push can insert multiple
   • consider fromIndex if possible
2. Cache Global Variable
3. Bubble up
35. Throttle/debounce events flow

Final Take Away