JavaScript front end performance optimizations
Download as PPTX, PDF2 likes873 views
The document discusses front-end performance optimizations for web applications, emphasizing the importance of faster load times for user experience and engagement. It provides best practices for managing JavaScript, DOM interactions, and third-party scripts, along with profiling tools and techniques for improving site performance. Key recommendations include reducing file requests, minimizing the use of unnecessary libraries, and implementing effective caching and compression strategies.
![Sparse vs Dense Arrays
var a = new Array(3);
a [ , , ];
a.length === 3
a[0] === undefined
a.map(function (x, i) { return i }) === [ , , ]
LOVE2DEV.COM](https://image.slidesharecdn.com/javascriptfront-endperformanceoptimizations-160916114213/85/JavaScript-front-end-performance-optimizations-65-320.jpg)
![Sparse vs Dense Arrays
• Array(undefined, undefined, undefined)
• a.map(function (x, i) { return i }) === [ 0, 1, 2 ]
LOVE2DEV.COM](https://image.slidesharecdn.com/javascriptfront-endperformanceoptimizations-160916114213/85/JavaScript-front-end-performance-optimizations-66-320.jpg)
![JavaScript: Flexibility or performance
Flexibility Performance
“Think C++”“Think Script”
Simple Websites Complex Apps, Games
var r = 3 * "10"; // r == 300
var a = new Array();
a.push(10);
var p = {x: 0, y: 0};
p.z = 5;
p["some text"] = 1;
p[1] = 2;
eval("var s = p[1] * a[0]"); // s == 20
var r = 3 * parseInt("10");
var a = new Array(100);
a[0] = 10;
var p = new Point(0, 0, 0);
p.z = 5;](https://image.slidesharecdn.com/javascriptfront-endperformanceoptimizations-160916114213/85/JavaScript-front-end-performance-optimizations-72-320.jpg)
![Stick to Integer Math
Write Fast JavaScript
DoMath(Math.floor(999 / 2));
var b = Math.ceil((p[i].r + p[i].g + p[i].b) / 3);](https://image.slidesharecdn.com/javascriptfront-endperformanceoptimizations-160916114213/85/JavaScript-front-end-performance-optimizations-76-320.jpg)
![Stick to Integer Math
Write Fast JavaScript
DoMath(Math.floor(999 / 2));
var b = Math.ceil((p[i].r + p[i].g + p[i].b) / 3);](https://image.slidesharecdn.com/javascriptfront-endperformanceoptimizations-160916114213/85/JavaScript-front-end-performance-optimizations-77-320.jpg)
![Stick to Integer Math
Write Fast JavaScript
DoMath(Math.floor(999 / 2));
var b = Math.ceil((p[i].r + p[i].g + p[i].b) / 3);](https://image.slidesharecdn.com/javascriptfront-endperformanceoptimizations-160916114213/85/JavaScript-front-end-performance-optimizations-78-320.jpg)
JavaScript front end performance optimizations
- 1. JavaScript Front-End Performance Optimizations Northeast JavaScript Conference LOVE2DEV.COM
- 2. My Bio Microsoft MVP ASP Insider Edge User Agent Web Developer 25 years Author & Speaker @ChrisLove Love2Dev.com
- 4. 10 Days to HTML5 Fitness http://bit.ly/2ctJMiU
- 6. Annoying???
- 7. LOVE2DEV.COM "Also take a step back for a minute and consider the intent of this change: a faster web is great for everyone, but especially for users. Lots of websites have demonstrated that speeding up the user experience results in more usage. So speeding up your website isn’t just something that can affect your search rankings–it’s a fantastic idea for your users.“ http://bit.ly/SPPB4k Matt Cutts
- 8. GOALS Web Trends & Some History Front-End Architecture Best Practices Coding Syntax Navigation & Performance Timing API Build & Deploy LOVE2DEV.COM
- 9. Web Trends & History LOVE2DEV.COM
- 10. 6 Years of JS Weight Gain
- 11. The Reach of JavaScript Expanded Web Applications/SPAs HTML5 Games Basic Web Pages JavaScript Execution Speed DOM Interactions Accelerated Graphics Page Load Time
- 12. Conference Sponsor Sites Performance LOVE2DEV.COM
- 13. Conference Sponsor Sites Averages LOVE2DEV.COM • Document Complete 6.94s • Fully Loaded 8.7s • Page Weight 2.8MB • JS Weight 788kb
- 14. Web Sites Are Obese & Out of Shape http://httpArchive.org as of 5/15/2016 117 File Requests – 2.4+MB 23 JavaScript Files - 401KB 7.1 CSS Files – 74KB 56 Images – 1.577MB 36 TCP Connections 19 Domains 48% Cacheable
- 15. Is JavaScript the Problem?
- 17. YUI Total Size (k) Number Elements CSS Rules Image Files Script Lines (F) Script Libraries Site #1 3,697 1,504 1,392 41 77,768 Site #2 2,278 1,100 5,325 29 39,183 Site #3 1,061 2,673 1,105 66 12,643 Site #4 1,812 4,252 1,672 12 10,284 Site #5 1,372 900 3,902 6 38,269 jQuery Prototype ExtJS OtherScriptaculous
- 18. YUI Total Size (k) Number Elements CSS Rules Image Files Script Lines (F) Script Libraries Site #1 3,697 1,504 1,392 41 77,768 Site #2 2,278 1,100 5,325 29 39,183 Site #3 1,061 2,673 1,105 66 12,643 Site #4 1,812 4,252 1,672 12 10,284 Site #5 1,372 900 3,902 6 38,269 jQuery Prototype ExtJS OtherScriptaculous Fastest
- 19. YUI Total Size (k) Number Elements CSS Rules Image Files Script Lines (F) Script Libraries Site #1 3,697 1,504 1,392 41 77,768 Site #2 2,278 1,100 5,325 29 39,183 Site #3 1,061 2,673 1,105 66 12,643 Site #4 1,812 4,252 1,672 12 10,284 Site #5 1,372 900 3,902 6 38,269 jQuery Prototype ExtJS OtherScriptaculous Slowest
- 20. Is JavaScript the Problem? • Bytes Must Be Downloaded • Bytes Cost Real Money • 25% of US Exceeds Monthly Bandwidth • Bytes Take Time • Scripts Must Be Evaluated • Libraries Can Overwrite Native APIs or Don’t Use Native APIs LOVE2DEV.COM
- 21. Don’t Guess • Use Profiling Tools • Establish Benchmarks • < 1s Desktop/Broadband • < 3s Mobile/GPRS • Test On Real Devices Against ‘Real Site’ • Have a 2G Day • Apply Scientific Method to Solve Problems LOVE2DEV.COM
- 22. Establish a Performance Culture • Make Perforamance a 1st Class Citizen of Your Team • Include Developers, Architects, QA & Stakeholders • Etsy Quarterly Performance Reports • https://codeascraft.com/2016/04/28/q1-2016-site- performance-report/ • Designing For Performance • http://amzn.to/2d30GRy
- 24. What Does Your Site Cost? http://whatdoesmysitecost.com
- 26. Real & Perceived Performance
- 28. Place Script References At The Bottom • SCRIPT is a Blocking Action • Allow Browser to Render As Much As Possible Before Evaluating & Executing Scripts
- 29. JS Parse & Execution Time • Scripts Must Be Downloaded • Scripts Must Be Evaluated • Majority of Traffic from Mobile Class Devices • Lower Powered CPU • Less Memory • Etsy Tool • https://timkadlec.com/2014/09/js-parse-and-execution-time/
- 31. Best Practice • Ask If Script/Library/Framework Is Really Needed • Are Their Alternatives? • Strive to Use Libraries Components That Do What Needs to be Done
- 32. Best Practice – Libraries & Frameworks • Use A Single Library • Keep Library Up To Date • Avoid Duplicate References • Avoid Duplicate Versions
- 33. Avoid Duplicate Code <html> <head> <title>Test</title> </head> <body> … <script src="jquery.js" … ></script> <script src="myscript.js" … ></script> <script src="navigation.js" … ></script> <script src="jquery.js" … ></script> </body> </html>
- 34. Avoid Duplicate Code 52%of the pages on the web have duplicate code
- 35. Standardize on Single Library/Framework <script src="jquery.js" … ></script> <script src="prototype.js" … ></script> <script src="dojo.js" … ></script> <script src="animater.js" … ></script> <script src="extjs.js" … ></script> <script src="yahooui.js" … ></script> <script src="mochikit.js" … ></script> <script src="lightbox.js" … ></script> <script src="jslibs.js" … ></script> <script src=“gsel.js" … ></script> …
- 36. ASP.NET Web Client Library Prototype jQuery/jQueryUI Ember Angular React
- 37. Ask If It Is Needed • Avoid Framework Archeology • Don’t Use a Library/Framework to be Cool • Resume Driven Development • Remember the Goal is to Make the Customer Happy • They Pay the Bills! • Majority of Pages/Sites are Still Read-Only
- 38. Use Async & Defer • Allows Browser to Finish Rendering Cycle • Use When Script Order is not important • Use When Script is not needed to render
- 40. 3rd Parties • Often Added By Marketing Departments • Use of Tag Managers • Many Are Not Used by Stakeholders • Not Part of Application/Site Q/A • Not Managed By DevOps • Not Held to SLA LOVE2DEV.COM
- 41. 3rd Parties • You Are Outsourcing Control Of Your Business To A Supplier You Have Little or No Control • They Can & Do Have A Big Impact On Your Brand Image and Engagment LOVE2DEV.COM
- 42. DOM Interactions • Built In DOM Methods More Efficient • Avoid Type Conversion • Avoid DOM Chatiness LOVE2DEV.COM
- 43. DOM Methods More Efficient • querySelector • querySelectorAll • firstElementChild • nextElementSibling • previousElementSibling • lastElementChild • childElementCount LOVE2DEV.COM
- 44. function InsertUsername() { document.getElementById('user').innerHTML = userName; } User .innerHTML to Construct Your Page Use DOM Efficiently
- 45. function InsertUsername() { document.getElementById('user').innerHTML = userName; } User .innerHTML to Construct Your Page Use DOM Efficiently
- 46. function BuildUI() { var elm = document.getElementById('ui'); var contents = BuildTitle() + BuildBody() + BuildFooter(); elm.innerHTML = contents; } Batch Markup Changes Use DOM Efficiently
- 47. function BuildUI() { var elm = document.getElementById('ui'); var contents = BuildTitle() + BuildBody() + BuildFooter(); elm.innerHTML = contents; } Batch Markup Changes Use DOM Efficiently
- 48. function BuildUI() { var elm = document.getElementById('ui'); var contents = BuildTitle() + BuildBody() + BuildFooter(); elm.innerHTML = contents; } Batch Markup Changes Use DOM Efficiently
- 49. function BuildUI() { var elm = document.getElementById('ui'); var contents = BuildTitle() + BuildBody() + BuildFooter(); elm.innerHTML = contents; } Batch Markup Changes Use DOM Efficiently
- 51. Use DOM Methods to Create Collections LOVE2DEV.COM
- 52. Use DOM Selectors Collection Access LOVE2DEV.COM
- 53. Avoid DOM Type Conversion
- 55. Performance • UI Responsiveness • Identify CPU Intensive Code • Identify Frame Rate Issues • JavaScript Profiling • Identify Code Bottlenecks LOVE2DEV.COM
- 56. Memory Profiling
- 57. Memory Profiling • Timeline to Identify Memory Pressure Issues • Track Down Memory Leaks LOVE2DEV.COM
- 59. Memory Leaks
- 60. Memory Leaks
- 61. Memory Leaks
- 62. Array Best Practices • Pre-Allocate • Keep Array Type Consistent • Use Typed Arrays • Keep Arrays Dense • Enumerate Efficiently LOVE2DEV.COM
- 64. Sparse vs Dense Arrays • Arrays are Sparse, they have holes in them • A map from indices to values LOVE2DEV.COM
- 65. Sparse vs Dense Arrays var a = new Array(3); a [ , , ]; a.length === 3 a[0] === undefined a.map(function (x, i) { return i }) === [ , , ] LOVE2DEV.COM
- 66. Sparse vs Dense Arrays • Array(undefined, undefined, undefined) • a.map(function (x, i) { return i }) === [ 0, 1, 2 ] LOVE2DEV.COM
- 69. Don’t do useless work setInterval(draw, 0); setTimeout(draw, 0); requestAnimationFrame(draw); setTimeout(draw, 1000 / 60);
- 70. Do avoid chattiness with the DOM JavaScript DOM for (var i = 0; i < this.nOfBubbles; i++) { document.body.box.getElementById("ball0").style.left = b.x + "px"; document.body.box.getElementById("ball0").style.top = b.y + "px"; }
- 71. Do check types of values from DOM this.nOfBubbles = document.getElementById(“dropDown").value; 30% of rendering time in string conversion Slow Operations 11% Value Conversions 18% GC 17% Your Code 45%
- 72. JavaScript: Flexibility or performance Flexibility Performance “Think C++”“Think Script” Simple Websites Complex Apps, Games var r = 3 * "10"; // r == 300 var a = new Array(); a.push(10); var p = {x: 0, y: 0}; p.z = 5; p["some text"] = 1; p[1] = 2; eval("var s = p[1] * a[0]"); // s == 20 var r = 3 * parseInt("10"); var a = new Array(100); a[0] = 10; var p = new Point(0, 0, 0); p.z = 5;
- 73. • C, C++, C# (Static Language) • static int DoMath(int value) { • int result = 0; • for (int i = 0; i < 10000; i++) { • for (int j = 0; j < 10000; j++) { • result = i + j + value; • } • } • return result; • } JavaScript (Dynamic Language) function DoMath(value) { for (var i = 0; i < 10000; i++) { for (var j = 0; j < 10000; j++) { var result = i + j + value; } } return result; } Stick to Integer Math Write Fast JavaScript
- 74. Stick to Integer Math Write Fast JavaScript C++ JavaScript DoMath(999); 40ms 200ms (~5x) DoMath(999/2); 40ms 1600ms (~40x)
- 75. Stick to Integer Math Write Fast JavaScript 0x005e22a0 Pointer 01 Type Tag 449.4999999…… … Value 02 Type Tag “Hello World” Value 0x005e4148 Pointer
- 76. Stick to Integer Math Write Fast JavaScript DoMath(Math.floor(999 / 2)); var b = Math.ceil((p[i].r + p[i].g + p[i].b) / 3);
- 77. Stick to Integer Math Write Fast JavaScript DoMath(Math.floor(999 / 2)); var b = Math.ceil((p[i].r + p[i].g + p[i].b) / 3);
- 78. Stick to Integer Math Write Fast JavaScript DoMath(Math.floor(999 / 2)); var b = Math.ceil((p[i].r + p[i].g + p[i].b) / 3);
- 79. Do write fast objects • Add all properties in constructor • Don’t delete properties • Use identifiers for property names • Use getters and setters sparingly • Avoid conditionally adding properties • Avoid default property values on prototype objects
- 80. Navigation & Performance Timing APIs • Give You Access to Real Times • Various Stages of Document Lifecycle • https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API • http://www.html5rocks.com/en/tutorials/webperformance/basics/
- 81. Navigation & Performance Timing APIs
- 82. How to Build JavaScript • Maintain Development, QA, Production Versions • Use a Build Tool • Grunt, Gulp, WebPac, Broccoli, Node, etc
- 83. How to Build Production JavaScript • Bundle & Minify • A Single Request is much faster to download and parse • Compress • Gzip • Content-Encoding Header • Set Proper Cache Headers • CacheControl: "public, max-age=31449600, s-max-age=360“ • Use A CDN • Host on Static Server
- 84. How to Build Production JavaScript • Node Modules Exists to Automate All these Requirements • Set it and Forget It!
Editor's Notes
- #15: Update these #s before the presentation as they are always updating