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 [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 - @HughAJWood