You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)

You don’t know JS about SharePoint - Mastering JavaScript performanceSharePoint Konferenz ErdingHugh Wood – Master Chief – Rencore AB - @HughAJWood

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

AJAX

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

AJAX XHR - XMLHttpRequest

function request(method, url) { return new Promise(function (resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open(method, url); xhr.onload = resolve; xhr.onerror = reject; xhr.send(); });}

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

jQuery – AJAX + Deferreds

$.when( $.ajax( "test.aspx" ) ).then(function( data, textStatus, jqXHR ) { log( jqXHR.status );});

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

jQuery – executeQueryAsync + Deferreds

// Wrap executeQueryAsync to use jQuery deferredfunction executeQueryAsync(item, task) {

var dfd = $.Deferred();context.executeQueryAsync(function() {

if (typeof task == 'function') {task.call();

}dfd.resolve(item);

}, function(sender, args) {dfd.reject();

});return dfd;

}

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Queuing Async Operations

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Queuing Async Operationsvar taskQueue = [],

xhrXimit = 5,xhrThreads = 0;

function queueTask(method, url) {queue.push({"method":method, "url":url});

}function executeQueueTask() {

// Nothing to doif(myQueue.length === 0 || xhrThreads >= xhrLimit) return;var task = queue.shift();xhrThreads++;request(task.method, task.url).then(function() { xhrThreads--; });

}queueTask("POST", "/v1/public/characters/1009268");

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Loop Performance

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Loop Performance

https://jsperf.com/fastest-array-loops-in-javascript/515

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Loop Performance – Winner Overall

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Loop Performance – The real winner

while( i = arr.pop() ) { someFn(i);}

10934% ~ 15417% in all browsers than a regular for loop

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Loop Performance

JavaScript Code Abstract Syntax Tree Native Code

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Memory Reference Performance

// Copy Referencevar len = arr.length;

// y is slower to access as you have to go through xvar a = x.y;

// z is even slower! x->y->zvar b = x.y.z;

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Memory Reference Performance

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Memory Reference Performancehttp://jsperf.com/object-reference-performance-tests

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Asynchronous Control

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Asynchronous Control - Promises

fulfilled - The action relating to the promise succeededrejected - The action relating to the promise failedpending - Hasn't fulfilled or rejected yetsettled - Has fulfilled or rejected

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Asynchronous Control - Promises

promise.then(function(n) { // 1 log(n); return n + 1;}).then(function(n) { // 3 log(n);});

var promise = new Promise(function(resolve, reject) { resolve(1);});

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Asynchronous Control - Promises

PROMISES ARE SLOW!!!!

Are they?

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Asynchronous Control - Promises

PROMISES SCALE

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Memory Efficiency - Declaration// Results in multiple copies of foobaz.Bar = function() { // constructor body this.foo = function() { // method body };}

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Memory Efficiency - Declaration// Results in multiple copies of foobaz.Bar = function() { // constructor body this.foo = function() { // method body };} // Results in a singular copy of foo

baz.Bar = function() { // constructor body};

baz.Bar.prototype.foo = function() { // method body};

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Memory Efficiency - Functionsfunction setupAlertTimeout() { var msg = 'Message to alert'; window.setTimeout(function() { alert(msg); }, 100);}

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Memory Efficiency - Functionsfunction setupAlertTimeout() { var msg = 'Message to alert'; window.setTimeout(function() { alert(msg); }, 100);}

function alertMsg() { var msg = 'Message to alert'; alert(msg);}

function setupAlertTimeout() { window.setTimeout(alertMsg, 100);}

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Memory Leaks

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

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

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Memory Leaks

$('<div/>').html(new Array(1000).join('text')).click(function() { }).appendTo('#data');

document.getElementById('data').innerHTML = '';

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

Memory Leaks

$('<div/>').html(new Array(1000).join('text')).click(function() { }).appendTo('#data');

document.getElementById('data').innerHTML = '';

Ajax performanceLoop performanceMemory reference performanceAsynchronous controlMemory EfficiencyMemory Leaks

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

@HughAJWoodhttps//blog.spcaf.com Hugh.Wood@Rencore.com

Hugh WoodLeicester, EnglandMaster Chief @ Rencore GmbHYou don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood