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

You don’t know JS about SharePoint - Mastering JavaScript performance
SharePoint Konferenz Erding
Hugh 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 deferred
function 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 Operations
var taskQueue = [],
xhrXimit = 5,
xhrThreads = 0;
function queueTask(method, url) {
queue.push({"method":method, "url":url});
}
function executeQueueTask() {
// Nothing to do
if(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

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 Reference
var len = arr.length;
// y is slower to access as you have to go through x
var a = x.y;
// z is even slower! x->y->z
var b = x.y.z;

http://jsperf.com/object-reference-performance-tests

Asynchronous Control

Asynchronous Control - Promises
fulfilled - The action relating to the promise succeeded
rejected - The action relating to the promise failed
pending - Hasn't fulfilled or rejected yet
settled - 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 foo
baz.Bar = function() {
// constructor body
this.foo = function() {
// method body
};
}

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

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

Memory Efficiency - Functions
window.setTimeout(function() { alert(msg); }, 100);
}
function alertMsg() {
alert(msg);
}
window.setTimeout(alertMsg, 100);
}

Memory Leaks

Memory Leaks
var 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 performance
Loop performance
Memory reference performance
Asynchronous control
Memory Efficiency
Memory Leaks

@HughAJWood
https//blog.spcaf.com Hugh.Wood@Rencore.com
Hugh Wood
Leicester, England
Master Chief @ Rencore GmbH

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

More Related Content

What's hot (20)

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

More from Rencore (10)

Recently uploaded (20)

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