Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
You don’t know JS about SharePoint - Mastering JavaScript performance
SharePoint Konferenz Erding
Hugh Wood – Master Chief...
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 req...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
jQuery – AJAX + Deferreds
$.when( $.aj...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
jQuery – executeQueryAsync + Deferreds...
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 Operations
var taskQueue...
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/fa...
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
whi...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Loop Performance
JavaScript Code
Abstr...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Reference Performance
// Copy R...
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 Performance
http://js...
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
fulfil...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Asynchronous Control - Promises
promis...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Asynchronous Control - Promises
PROMIS...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Asynchronous Control - Promises
PROMIS...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Efficiency - Declaration
// Res...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Efficiency - Declaration
// Res...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Efficiency - Functions
function...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Efficiency - Functions
function...
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 Leaks
var run = function () {
v...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Leaks
$('<div/>')
.html(new Arr...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Memory Leaks
$('<div/>')
.html(new Arr...
Ajax performance
Loop performance
Memory reference performance
Asynchronous control
Memory Efficiency
Memory Leaks
You don...
@HughAJWood
https//blog.spcaf.com Hugh.Wood@Rencore.com
Hugh Wood
Leicester, England
Master Chief @ Rencore GmbH
You don’t...
You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood
Upcoming SlideShare
Loading in …5
×

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

854 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. You don’t know JS about SharePoint - Mastering JavaScript performance SharePoint Konferenz Erding Hugh Wood – Master Chief – Rencore AB - @HughAJWood
  2. 2. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood AJAX
  3. 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. 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. 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. 6. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood Queuing Async Operations
  7. 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. 8. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood Loop Performance
  9. 9. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood Loop Performance https://jsperf.com/fastest-array-loops-in-javascript/515
  10. 10. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood Loop Performance – Winner Overall
  11. 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. 12. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood Loop Performance JavaScript Code Abstract Syntax Tree Native Code
  13. 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. 14. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood Memory Reference Performance
  15. 15. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood Memory Reference Performance http://jsperf.com/object-reference-performance-tests
  16. 16. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood Asynchronous Control
  17. 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. 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. 19. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood Asynchronous Control - Promises PROMISES ARE SLOW!!!! Are they?
  20. 20. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood Asynchronous Control - Promises PROMISES SCALE
  21. 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. 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. 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. 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. 25. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood Memory Leaks
  26. 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. 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. 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. 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. 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. 31. You don’t know JS about SharePoint - Mastering JavaScript performance - @HughAJWood

×