One of the hardest parts of JavaScript development to master is performance. While the steps that I will take you through are very basic in nature, you cannot be a SharePoint JavaScript master without the fundamental understand of JavaScript performance that I will show you in these slides. I will go over browser JavaScript compilation, and how you can leverage the language to your benefits. I will cover: Ajax performance, Loop performance, Memory reference performance, Memory utilisation, Asynchronous control, How to prevent browser timeouts, The simple rules to prevent memory leaks

1. You don’t know JS about SharePoint - Mastering JavaScript performance
SharePoint Konferenz Erding
Hugh Wood – Master Chief – Rencore AB - @HughAJWood

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

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

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

5. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
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;
}

6. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Queuing Async Operations

7. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
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");

8. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Loop Performance

9. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Loop Performance
https://jsperf.com/fastest-array-loops-in-javascript/515

10. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Loop Performance – Winner Overall

11. 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

12. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Loop Performance
JavaScript Code
Abstract Syntax
Tree
Native Code

13. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
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;

14. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Reference Performance

15. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Reference Performance
http://jsperf.com/object-reference-performance-tests

16. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Asynchronous Control

17. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
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

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

19. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Asynchronous Control - Promises
PROMISES ARE SLOW!!!!
Are they?

20. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Asynchronous Control - Promises
PROMISES SCALE

21. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Efficiency - Declaration
// Results in multiple copies of foo
baz.Bar = function() {
// constructor body
this.foo = function() {
// method body
};
}

22. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Efficiency - Declaration
// Results in multiple copies of foo
baz.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
};

23. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Efficiency - Functions
function setupAlertTimeout() {
var msg = 'Message to alert';
window.setTimeout(function() { alert(msg); }, 100);
}

24. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Efficiency - Functions
function 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);
}

25. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Leaks

26. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
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);

27. 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 = '';

28. 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 = '';

29. Ajax performance
Loop performance
Memory reference performance
Asynchronous control
Memory Efficiency
Memory Leaks
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

30. @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 - @HughAJWood

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