High Performance JavaScript - Fronteers 2010
34 likes4,209 views
The document discusses JavaScript performance and its impact on user experience, emphasizing the role of the browser's UI thread in executing JavaScript and updating the interface. It provides techniques for optimizing JavaScript execution, such as limiting job duration to 50ms, deferring script loading, and using web workers to offload processing tasks. Recommendations include placing scripts at the bottom of the page and combining them to enhance load times and responsiveness.
![How Long Is Too Long?
“0.1 second [100ms] is about the limit for
having the user feel that the system is reacting
instantaneously, meaning that no special
feedback is necessary except to display the
result.”
- Jakob Nielsen
Demo!](https://image.slidesharecdn.com/high-performance-javascript-fronteers-101008082347-phpapp02/85/High-Performance-JavaScript-Fronteers-2010-46-320.jpg)
![function processArray(items, process, callback){
for (var i=0,len=items.length; i < len; i++){
process(items[i]);
}
callback();
}](https://image.slidesharecdn.com/high-performance-javascript-fronteers-101008082347-phpapp02/85/High-Performance-JavaScript-Fronteers-2010-93-320.jpg)
![//in page
var worker = new Worker("process.js");
worker.onmessage = function(event){
useData(event.data);
};
worker.postMessage(values);
//in process.js
self.onmessage = function(event){
var items = event.data;
for (var i=0,len=items.length; i < len; i++){
process(items[i]);
}
self.postMessage(items);
};
Demo!](https://image.slidesharecdn.com/high-performance-javascript-fronteers-101008082347-phpapp02/85/High-Performance-JavaScript-Fronteers-2010-109-320.jpg)
High Performance JavaScript - Fronteers 2010
- 1. High Performance JavaScript Nicholas C. Zakas Yahoo!, Inc. October 9, 2010
- 2. Who's this guy? Principal Front End Contributor, Engineer Creator of YUI Test Author Lead Author Contributor Lead Author
- 8. Does JavaScript performance matter?
- 9. After all, all browsers now have optimizing JavaScript engines Tracemonkey/ V8 Squirrelfish Chakra Karakan JaegarMonkey (all) (4+) (9+) (10.5+) (3.5+)
- 10. So our scripts are getting really, really fast
- 11. Old computers ran slow applications Small amounts of CPU power and memory
- 12. New computers are generally faster but slow applications still exist More CPU + more memory = less disciplined application development
- 15. It's still possible to write slow JavaScript on the new, faster JavaScript engines
- 16. JavaScript performance directly affects user experience
- 18. Where to start?
- 19. The UI Thread The brains of the operation
- 20. The browser UI thread is responsible for both UI updates and JavaScript execution Only one can happen at a time
- 21. Jobs for UI updates and JavaScript execution are added to a UI queue if the UI thread is busy Each job must wait in line for its turn to execute
- 22. <button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> <script type="text/javascript"> window.onload = function(){ document.getElementById("btn").onclick = function(){ //do something }; }; </script> Demo!
- 23. Before Click UI Thread time UI Queue
- 24. When Clicked UI Thread time UI Queue UI Update onclick UI Update
- 25. When Clicked UI Thread UI Update time UI Queue onclick Draw down state UI Update
- 26. When Clicked UI Thread UI Update onclick time UI Queue UI Update
- 27. When Clicked UI Thread UI Update onclick UI Update time UI Queue Draw up state
- 28. No UI updates while JavaScript is executing Demo!
- 29. JavaScript May Cause UI Update <button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> <script type="text/javascript"> window.onload = function(){ document.getElementById("btn").onclick = function(){ var div = document.createElement(“div”); div.className = “tip”; div.innerHTML = “You clicked me!”; document.body.appendChild(div); }; }; </script>
- 30. A UI update must use the latest info available
- 31. Long-running JavaScript = Unresponsive UI
- 32. Responsive UI UI Thread UI Update JavaScript UI Update time
- 33. Unresponsive UI UI Thread UI Update JavaScript UI Update time
- 34. The longer JavaScript runs, the worse the user experience
- 35. The runaway script timer prevents JavaScript from running for too long Each browser imposes its own limit (except Opera)
- 37. Firefox
- 38. Safari
- 39. Chrome
- 41. Runaway Script Timer Limits • Internet Explorer: 5 million statements • Firefox: 10 seconds • Safari: 5 seconds • Chrome: Unknown, hooks into normal crash control mechanism • Opera: none
- 42. Does JIT compiling help?
- 43. Interpreted JavaScript UI Thread Interpret time
- 44. JITed JavaScript (1st Run) UI Thread Compile Execute time
- 45. JITed JavaScript (After 1st Run) UI Thread Execute time
- 46. How Long Is Too Long? “0.1 second [100ms] is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.” - Jakob Nielsen Demo!
- 47. Translation: No single JavaScript job should execute for more than 100ms to ensure a responsive UI
- 48. Recommendation: Limit JavaScript execution to no more than 50ms measured on IE6 :)
- 49. Doing so makes your program awesome
- 50. Loadtime Techniques Don't let JavaScript interfere with page load performance
- 51. During page load, JavaScript takes more time on the UI thread
- 52. <!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <script src="foo.js"></script> <p>See ya!</p> </body> </html>
- 53. Result UI Thread UI Update JavaScript UI Update time
- 54. Result UI Thread Hello world! foo.js See ya! time Demo!
- 55. Result UI Thread Hello world! Download Parse Run See ya! time The UI thread needs to wait for the script to download, parse, and run before continuing
- 56. Result UI Thread Hello world! Download Parse Run See ya! Variable Constant Download time takes the longest and is variable
- 57. Translation: The page doesn't render while JavaScript is downloading, parsing, or executing during page load
- 58. <!doctype html> <html> <head> <title>Example</title> </head> <body> <script src="foo.js"></script> <p>Hello world!</p> <script src="bar.js"></script> <p>See ya!</p> <script src="baz.js"></script> <p>Uh oh!</p> </body> </html>
- 59. Result UI Thread JavaScript UI Update JavaScript UI Update JavaScript time The more scripts to download in between UI updates, the longer the page takes to render
- 60. Technique #1: Put scripts at the bottom
- 62. <!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <p>See ya!</p> <script src="foo.js"></script> </body> </html>
- 63. Put Scripts at Bottom UI Thread UI Update UI Update JavaScript JavaScript JavaScript time Demo! Even if there are multiple scripts, the page renders quickly
- 64. Technique #2: Combine JavaScript files
- 65. <!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <p>See ya!</p> <script src="foo.js"></script> <script src="bar.js"></script> <script src="baz.js"></script> </body> </html>
- 66. UI Thread UI Update JavaScript JavaScript JavaScript time Each script has overhead of downloading
- 67. UI Thread UI Update JavaScript time Combining all of the files limits the network overhead and gets scripts onto the page faster
- 68. <!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <p>See ya!</p> <script src="foo-and-bar-and-baz.js"></script> </body> </html>
- 69. Technique #3: Load scripts dynamically
- 70. Basic Technique var script = document.createElement("script"), body; script.type = "text/javascript"; script.src = "foo.js"; body.appendChild(script, body.firstChild); Dynamically loaded scripts are non-blocking
- 71. Downloads no longer block the UI thread
- 72. <!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <script src="foo.js"></script> <p>See ya!</p> </body> </html>
- 73. Using HTML <script> UI Thread Hello world! Download Parse Run See ya! time
- 74. <!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <script> var script = document.createElement("script"), body = document.body; script.type = "text/javascript"; script.src = "foo.js"; body.insertBefore(script, body.firstChild); </script> <p>See ya!</p><!-- more content --> </body> </html>
- 75. Using Dynamic Scripts UI Thread Hello world! See ya! Run UI Update time Download Parse Only code execution happens on the UI thread, which means less blocking of UI updates
- 76. function loadScript(url, callback){ var script = document.createElement("script"), body = document.body; script.type = "text/javascript"; if (script.readyState){ //IE <= 8 script.onreadystatechange = function(){ if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; callback(); } }; } else { //Others script.onload = function(){ callback(); }; } script.src = url; body.insertBefore(script, body.firstChild); }
- 77. Usage loadScript("foo.js", function(){ alert("Loaded!"); });
- 78. Timing Note: Script execution begins immediately after download and parse – timing of execution is not guaranteed
- 79. Using Dynamic Scripts UI Thread Hello world! Run See ya! UI Update time Download Parse Depending on time to download and script size, execution may happen before next UI update
- 80. Technique #4: Defer scripts
- 81. <!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <script defer src="foo.js"></script> <p>See ya!</p> <!-- even more markup --> </body> </html>
- 82. Support for <script defer> 3.5 Soon Soon 4.0 ?
- 83. Deferred scripts begin to download immediately, but don't execute until all UI updates complete (DOMContentLoaded)
- 84. Using <script defer> UI Thread Hello world! See ya! More UI More UI Run time Download Parse Similar to dynamic script nodes, but with a guarantee that execution will happen last
- 85. Timing Note: Although scripts always execute after UI updates complete, the order of multiple <script defer> scripts is not guaranteed across browsers
- 86. Technique #5: Asynchronous scripts
- 87. <!doctype html> <html> <head> <title>Example</title> </head> <body> <p>Hello world!</p> <script async src="foo.js"></script> <p>See ya!</p> <!-- even more markup --> </body> </html>
- 88. Support for <script async> 3.6 Soon Soon ? ?
- 89. Asynchronous scripts behave a lot like dynamic scripts
- 90. Using <script async> UI Thread Hello world! See ya! Run UI Update time Download Parse Download begins immediately and execution is slotted in at first available spot
- 91. Note: Order of execution is explicitly not preserved for asynchronous scripts
- 92. Runtime Techniques Ways to ensure JavaScript doesn't run away
- 93. function processArray(items, process, callback){ for (var i=0,len=items.length; i < len; i++){ process(items[i]); } callback(); }
- 95. JavaScript Timers • Created using setTimeout() • Schedules a new JavaScript execution job for some time in the future • When the delay is up, the job is added to the UI queue – Note: This does not guarantee execution after the delay, just that the job is added to the UI queue and will be executed when appropriate
- 96. JavaScript Timers • For complex processing, split up into timed functionality • Use timers to delay some processing for later
- 97. function timedProcessArray(items, process, callback){ //create a clone of the original var todo = items.concat(); setTimeout(function(){ var start = +new Date(); do { process(todo.shift()); } while (todo.length > 0 && (+new Date() - start < 50)); if (todo.length > 0){ setTimeout(arguments.callee, 25); } else { callback(items); } }, 25); } Demo(s)!
- 98. When Clicked UI Thread time UI Queue UI Update onclick UI Update
- 99. When Clicked UI Thread UI Update time UI Queue onclick UI Update
- 100. When Clicked UI Thread UI Update onclick time UI Queue UI Update
- 101. When Clicked UI Thread UI Update onclick UI Update time UI Queue
- 102. After 25ms UI Thread UI Update onclick UI Update time UI Queue JavaScript
- 103. After 25ms UI Thread UI Update onclick UI Update JavaScript time UI Queue
- 104. After Another 25ms UI Thread UI Update onclick UI Update JavaScript time UI Queue JavaScript
- 105. After Another 25ms UI Thread UI Update onclick UI Update JavaScript JavaScript time UI Queue
- 106. Technique #2: Web Workers
- 108. Web Workers • Asynchronous JavaScript execution • Execution happens in a separate process – Not on the UI thread = no UI delays • Data-driven API – Data is serialized when sending data into or out of Worker – No access to DOM, BOM – Completely separate execution environment
- 109. //in page var worker = new Worker("process.js"); worker.onmessage = function(event){ useData(event.data); }; worker.postMessage(values); //in process.js self.onmessage = function(event){ var items = event.data; for (var i=0,len=items.length; i < len; i++){ process(items[i]); } self.postMessage(items); }; Demo!
- 110. When Clicked UI Thread time UI Queue UI Update onclick UI Update
- 111. When Clicked UI Thread UI Update time UI Queue onclick UI Update
- 112. When Clicked UI Thread UI Update onclick time UI Queue UI Update
- 113. When Clicked UI Thread UI Update onclick time Worker Thread UI Queue UI Update
- 114. When Clicked UI Thread UI Update onclick UI Update time Worker Thread UI Queue JavaScript
- 115. Worker Thread Complete UI Thread UI Update onclick UI Update time UI Queue onmessage
- 116. Worker Thread Complete UI Thread UI Update onclick UI Update onmessage time UI Queue
- 117. Support for Web Workers 3.5 4.0 4.0 ? 10.6
- 118. Recap
- 120. The browser UI thread is responsible for both UI updates and JavaScript execution Only one can happen at a time
- 121. Responsive UI UI Thread UI Update JavaScript UI Update time
- 122. Unresponsive UI UI Thread UI Update JavaScript UI Update time
- 123. Avoid Slow Loading JavaScript • Put scripts at the bottom • Concatenate scripts into as few files as possible • Choose the right way to load your scripts – Dynamically created scripts – Deferred scripts – Asynchronous scripts
- 124. Avoid Slow JavaScript • Don't allow JavaScript to execute for more than 50ms • Break up long JavaScript processes using: – Timers – Web Workers
- 125. The End
- 126. Etcetera • My blog: www.nczonline.net • Twitter: @slicknet • These Slides: http://slideshare.net/nzakas/presentations/ • Rate Me: http://spkr8.com/t/4568
- 127. Questions?
- 128. Creative Commons Images Used • http://www.flickr.com/photos/8628950@N06/1332225362/ • http://www.flickr.com/photos/hippie/2406411610/ • http://www.flickr.com/photos/55733754@N00/3325000738/ • http://www.flickr.com/photos/eurleif/255241547/ • http://www.flickr.com/photos/off_the_wall/3444915939/ • http://www.flickr.com/photos/wwarby/3296379139/ • http://www.flickr.com/photos/derekgavey/4358797365/ • http://www.flickr.com/photos/mulad/286641998/