you don’t know js about sharepoint - mastering javascript performance (hugh wood)
TRANSCRIPT
![Page 1: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/1.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performanceSharePoint Konferenz ErdingHugh Wood – Master Chief – Rencore AB - @HughAJWood
![Page 2: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/2.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
AJAX
![Page 3: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/3.jpg)
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(); });}
![Page 4: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/4.jpg)
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 );});
![Page 5: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/5.jpg)
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;
}
![Page 6: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/6.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Queuing Async Operations
![Page 7: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/7.jpg)
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");
![Page 8: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/8.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Loop Performance
![Page 9: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/9.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Loop Performance
https://jsperf.com/fastest-array-loops-in-javascript/515
![Page 10: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/10.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Loop Performance – Winner Overall
![Page 11: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/11.jpg)
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
![Page 12: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/12.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Loop Performance
JavaScript Code Abstract Syntax Tree Native Code
![Page 13: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/13.jpg)
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;
![Page 14: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/14.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Reference Performance
![Page 15: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/15.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Reference Performancehttp://jsperf.com/object-reference-performance-tests
![Page 16: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/16.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Asynchronous Control
![Page 17: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/17.jpg)
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
![Page 18: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/18.jpg)
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);});
![Page 19: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/19.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Asynchronous Control - Promises
PROMISES ARE SLOW!!!!
Are they?
![Page 20: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/20.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Asynchronous Control - Promises
PROMISES SCALE
![Page 21: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/21.jpg)
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 };}
![Page 22: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/22.jpg)
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};
![Page 23: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/23.jpg)
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);}
![Page 24: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/24.jpg)
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);}
![Page 25: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/25.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Leaks
![Page 26: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/26.jpg)
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);
![Page 27: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/27.jpg)
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 = '';
![Page 28: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/28.jpg)
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 = '';
![Page 29: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/29.jpg)
Ajax performanceLoop performanceMemory reference performanceAsynchronous controlMemory EfficiencyMemory Leaks
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
![Page 30: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/30.jpg)
@HughAJWoodhttps//blog.spcaf.com [email protected]
Hugh WoodLeicester, EnglandMaster Chief @ Rencore GmbHYou don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
![Page 31: You don’t know JS about SharePoint - Mastering javascript performance (Hugh Wood)](https://reader036.vdocument.in/reader036/viewer/2022062902/58eef1161a28ab522d8b45ab/html5/thumbnails/31.jpg)
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood