High Perf JS

goo.gl/0JIpFe

JS Dude / @mdkhan005

www.thatJSdude.com

why performance

Performance improvement

Page Load

response

• gZip
• CDN

content type

scripts and styles

• Minify
• Combine
• cache
• CDN
• async and defer
• dynamic loading

Development

use framework

be smartly lazy

blame framework but take credit

Magic

Magic in Angular

• Compilation phase
• Runtime phase

Compilation Phase

<input ng-model="name">
						

{{name}}
						

Runtime Phase

There is no Magic

• Productivity could harm performance
• Don't be amazed by magic
• Do you really need magic?
• All of it or some?
• What is the cost of magic?
• Is it worth to take the overhead?

Array

Create Array

var a = new Array();    //[]
var b = new Array(3);//[undefined, undefined, undefined]
var c = new Array(5, 6, 7);// [5, 6, 7]
							

[];   //literals
var d = [5, 6, 7]; 
							

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);
								

b.lastIndexOf(169, 500);
								

filter vs if

var devs = [{ name: 'addy osmani', age: 29}, {name: 'paul irish', age:31}, {name: 'js dude', age: 13}];
							

devs.filter(function (el, i, arr) {
    return el.age > 21;
});
							

function filterByForLoop(myArr, num){
    
    var i = 0, j = 0, len, output=[];
    
    for (i = 0, len = myArr.length; i < len; i ++) {
        if (myArr[i].age > 21) {
            output[j++]= myArr[i];
        }
     }
     return output;    
}

native gives u option

Scope

JavaScript Scope

• Global scope
• local scope

global scope

var a = 2;
function b(){
   console.log(a);
}							

Local Scope

local/function scope

function foo(){
   var d = 21;
   console.log(d);
}
foo(); //21
							

console.log(d); //ReferenceError: d is not defined
								

store out of scope variable

var myArr = [0, 1, 2,3 4, 5 ...];

function useGlobal() {
    for (var j = 0; j < 10000; j++){
        console.log(myArr[j]);
    }
}
							

function useLocal() {
    var localArr = myArr;
    for (var k = 0; k < 10000; k++){
        console.log(localArr[k]);
    }
}
							

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 list = e.target.parentNode;
    list.parentNode.removeChild(list);
    e.preventDefault();
});
							

event delegate (demo)

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

security guard

Debounce & Throttle

Defer

You might not need

JQuery

Are you ready?

$(document).ready(function () {
   console.log('document is ready. I can sleep now');            
});

Script as Last Tag of body

document.addEventListener('DOMContentLoaded', function(){
   console.log('document is ready. I can sleep now'); 
});
							

document.onreadystatechange = function () {  
  if (document.readyState == "complete") {
    console.log('document is ready. I can sleep now');
  }
}

Copy ready: function from JQuery

$

$('#myId');
$('.myClass');
$('div p');
							

document.querySelectorAll('#myId');
document.querySelectorAll('.myClass');
document.querySelectorAll('div p');
							

querySelctorAll dont have map, each, filter

var nodes = document.querySelectorAll('.myClass');

//convert nodeList to array
var nodesArray = [].slice.call(nodes);
							

deal with class

$(el).addClass('hide');

$(el).removeClass('hide');

$(el).toggleClass('hide');

$(el).hasClass('hide');
							

//IE9+
el.classList.add('hide');
el.classList.remove('hide');
el.classList.toggle('hide'); 
el.classList.contains('hide');
							

jQuery helpers

$(el).hide();
$(el).show();

el.style.display = 'none';
el.style.display = '';

$(el).html();
$(el).html(setString);
$(el).empty();


el.innerHTML;
el.innerHTML = setString;
el.innerHTML = '';

$(el).text();
el.textContent;

event listener

$(el).on(eventName, eventHandler);

$(el).on('click', function(e){
    console.log(e.target);	
});
							

//IE9+
el.addEventListener(eventName, eventHandler);

el.addEventListener('click', function(e){
    console.log(e.target);
});
							

//remove event
$(el).off(eventName, eventHandler);

el.removeEventListener(eventName, eventHandler);
							

DOM manipulation

$(el).parent();
$(el).children();

$(el).next();
$(el).prev();

$(parent).append(el);
$(el).remove();

el.parentNode;
el.children;

el.nextElementSibling;
el.previousElementSibling

parent.appendChild(el);
el.parentNode.removeChild(el);

is JQuery Dead?

Decide based on your situation

Frameworks

angular

• bind once or one time binding
• prefer filter in the controller
• pagination, limitTo, track by
• $destroy, unbindwatch
• prefer digest over apply
• Everything doesnt have to be angular

React JS

• No two way bindings
• use virtual DOM
• difference algorithm
• update only the changes
• ng-react

How to improve Perf

Strategy?

Performance Test

Ways to test

Console API

console.assert(myArray.length >5, "More than 5 elements");
							

 function foo(){
    console.count('fooed');
 }

 foo(); // fooed: 1
 foo(); // fooed: 2
 foo(); // fooed: 3 
 							

console.time("Array initialize");

//your code

console.timeEnd("Array initialize");
							

Use tool like

• page speed
• webpagetest.org

Memory Profiling

so far

High Perf JavaScript

Break Everything

I have said

\

/

Build you own rules, and update old ones.

Final Take Away

• Nothing is absolutely right

trust Tools, not Rules

Free Tips

Appear Busy at Work