No one wants a slow loading, slow reacting application. As page weight has increased so has the dependency on JavaScript to drive rich user experiences. Today many pages load over 2MBs of JavaScript, but is this healthy? Do your scripts and dependencies perform well? In this session we will review common JavaScript performance bottlenecks, how to detect them and how to eliminate them. This session will review common bad coding syntax, architecture and how to replace them with better alternatives. You will also be exposed to caching, code organization, build and deployment best practices that produce the best user experiences. Finally, you will see how to use the navigation timing and performance timing APIs to fine tune your applications to produce a fast, lean application your customers will love.

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

3. Source Code
http://GitHub.com/
docluv
Slide Deck
http://slideshare.net/docluv/
presentations

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

23. Don’t Assume Broadband

24. What Does Your Site Cost?
http://whatdoesmysitecost.com

25. Power Consumption

26. Real & Perceived Performance

27. Architecture Best Practices
LOVE2DEV.COM

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

39. Audit 3rd Parties

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

50. Small Healthy DOM
LOVE2DEV.COM

51. Use DOM Methods to Create Collections
LOVE2DEV.COM

52. Use DOM Selectors Collection Access
LOVE2DEV.COM

53. Avoid DOM Type Conversion

54. Avoid DOM Chatiness

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

58. Memory Utilization

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

63. Use Typed Arrays
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

67. Keep Arrays Dense
LOVE2DEV.COM

68. Enumerate Arrays Efficently
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!