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


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


jQuery – AJAX + Deferreds

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


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;

}


Queuing Async Operations


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


Loop Performance


Loop Performance

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

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


Loop Performance – Winner Overall


Loop Performance – The real winner

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

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


Loop Performance

JavaScript Code Abstract Syntax Tree Native Code


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;


Memory Reference Performance


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


Asynchronous Control


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



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



PROMISES ARE SLOW!!!!

Are they?



PROMISES SCALE


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


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


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


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


Memory Leaks


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


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


@HughAJWoodhttps//blog.spcaf.com [email protected]

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 (hugh wood)

Technology