High Performance JavaScript (CapitolJS 2011)
Download as PPTX, PDF•71 likes•57,518 views
High Performance JavaScript provides techniques for optimizing JavaScript performance. It discusses how JavaScript execution blocks the browser UI thread, preventing responsive user experiences. It recommends limiting individual JavaScript jobs to under 50ms to avoid unresponsiveness. The document then provides techniques to improve load time performance such as dynamically loading scripts, and runtime techniques like timers and web workers to avoid blocking the UI thread during long-running processes.
![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](https://image.slidesharecdn.com/high-performance-javascript-2011-110918100745-phpapp02/85/High-Performance-JavaScript-CapitolJS-2011-42-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-2011-110918100745-phpapp02/85/High-Performance-JavaScript-CapitolJS-2011-78-320.jpg)
![//in pagevar worker = new Worker("process.js");worker.onmessage = function(event){ useData(event.data);};worker.postMessage(values);//in process.jsself.onmessage = function(event){var items = event.data;for (var i=0,len=items.length; i < len; i++){ process(items[i]); } self.postMessage(items);};](https://image.slidesharecdn.com/high-performance-javascript-2011-110918100745-phpapp02/85/High-Performance-JavaScript-CapitolJS-2011-107-320.jpg)
High Performance JavaScript (CapitolJS 2011)
- 1. High Performance JavaScriptNicholas C. Zakas| CapitolJS | September 18, 2011
- 2. Who's this guy?Co-Creator csslint.netContributor,Creator of YUI TestEx-tech leadYahoo!AuthorLead AuthorContributorLead Author
- 4. Does JavaScript performance matter?
- 8. All browsers now haveoptimizing JavaScript enginesTracemonkey/JaegarMonkey(3.5+)V8(all)Nitro(4+)Chakra(9+)Karakan(10.5+)
- 10. Old computers ran slow applicationsSmall amounts of CPU power and memory
- 11. New computers are generally faster butslow applications still existMore CPU + more memory = less disciplined application development
- 13. Oh yeah, one more thing
- 17. It's still possible to write slow JavaScript
- 18. JavaScript performancedirectlyaffects user experience
- 19. The UI Threadaka Browser Event Loop
- 20. The browser UI thread is responsible forboth UI updates and JavaScript executionOnly one can happen at a time
- 21. Jobs for UI updates and JavaScript executionare added to a UI queueEach 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>
- 23. Before ClickUI ThreadtimeUI Queue
- 24. When ClickedUI ThreadtimeUI QueueUI UpdateonclickUI Update
- 25. When ClickedUI ThreadUI UpdatetimeUI QueueonclickDraw down stateUI Update
- 26. When ClickedUI ThreadonclickUI UpdatetimeUI QueueUI Update
- 27. When ClickedUI ThreadonclickUI UpdateUI UpdatetimeUI QueueDraw up state
- 28. No UI updates while JavaScript is executing
- 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
- 32. Responsive UIUI ThreadJavaScriptUI UpdateUI Updatetime
- 33. Unresponsive UIUI ThreadJavaScriptUI UpdateUI Updatetime
- 34. The longer JavaScript runs,the worse the user experience
- 35. The runaway script timer prevents JavaScriptfrom running for too longEach browser imposes its own limit (except Opera)
- 37. Firefox
- 38. Safari
- 39. Chrome
- 41. Runaway Script Timer LimitsInternet Explorer: 5 million statementsFirefox: 10 secondsSafari: 5 secondsChrome: Unknown, hooks into normal crash control mechanismOpera: none
- 42. 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
- 43. Translation:No single JavaScript job should execute for more than 100ms to ensure a responsive UI
- 44. Recommendation:Limit JavaScript execution to no more than 50msmeasured on IE6 :)
- 45. Loadtime TechniquesDon't let JavaScript interfere with page load performance
- 46. During page load, JavaScript takes more time on the UI thread
- 47. <!doctype html><html><head> <title>Example</title></head><body> <p>Hello world!</p><script src="foo.js"></script> <p>See ya!</p></body></html>
- 48. ResultUI ThreadJavaScriptUI UpdateUI Updatetime
- 49. ResultUI Threadfoo.jsSee ya!Hello world!time
- 50. ResultUI ThreadDownloadSee ya!Hello world!ParseRuntimeThe UI thread needs to wait for the script todownload, parse, and run before continuing
- 51. ResultUI ThreadDownloadSee ya!Hello world!ParseRunVariableConstantDownload time takes the longest and is variable
- 52. Translation:The page doesn't render while JavaScript is downloading, parsing, or executing during page load
- 53. <!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>
- 54. ResultUI ThreadJavaScriptUI UpdateUI UpdateJavaScriptJavaScripttimeThe more scripts to download in between UIupdates, the longer the page takes to render
- 55. Technique #1: Load scripts dynamically
- 56. Basic Techniquevar script = document.createElement("script"), body;script.type = "text/javascript";script.src = "foo.js";body.insertBefore(script, body.firstChild);Dynamically loaded scripts are non-blocking
- 57. Downloads no longer block the UI thread
- 58. <!doctype html><html><head> <title>Example</title></head><body> <p>Hello world!</p><script src="foo.js"></script> <p>See ya!</p></body></html>
- 59. Using HTML <script>UI ThreadDownloadSee ya!Hello world!ParseRuntime
- 60. <!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>
- 61. Using Dynamic ScriptsUI ThreadSee ya!Hello world!UI UpdateRuntimeDownloadParseOnly code execution happens on the UI thread,which means less blocking of UI updates
- 62. 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);}
- 63. UsageloadScript("foo.js", function(){ alert("Loaded!");});
- 64. Timing Note:Script execution begins immediately after download and parse – timing of execution is not guaranteed
- 65. Technique #2: Defer scripts
- 66. <!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>
- 67. Support for <script defer>?5.03.57.04.0
- 68. Deferred scripts begin to download immediately, but don't execute until all UI updates complete
- 69. Using <script defer>UI ThreadSee ya!Hello world!More UIRunMore UItimeDownloadParseSimilar to dynamic script nodes, but with aguarantee that execution will happen last
- 70. Timing Note:Although scripts always execute after UI updates complete, the order of multiple <script defer> scripts is not guaranteed across browsers
- 71. Technique #3: Asynchronous scripts
- 72. <!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>
- 73. Support for <script async>?5.03.67.010
- 74. Asynchronous scripts behave a lot like dynamic scripts
- 75. Using <script async>UI ThreadSee ya!Hello world!UI UpdateRuntimeDownloadParseDownload begins immediately and execution isslotted in at first available spot
- 76. Note:Order of execution is explicitly not preserved for asynchronous scripts
- 77. Runtime TechniquesWays to ensure JavaScript doesn't run away
- 78. function processArray(items, process, callback){for (var i=0,len=items.length; i < len; i++){ process(items[i]); } callback();}
- 80. //create a new timer and delay by 500mssetTimeout(function(){//code to execute here}, 500);setTimeout() schedules a function to be added to the UI queue after a delay
- 81. 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);}
- 82. When ClickedUI ThreadtimeUI QueueUI UpdateonclickUI Update
- 83. When ClickedUI ThreadUI UpdatetimeUI QueueonclickUI Update
- 84. When ClickedUI ThreadonclickUI UpdatetimeUI QueueUI Update
- 85. When ClickedUI ThreadUI UpdateUI UpdateonclicktimeUI Queue
- 86. After 25msUI ThreadUI UpdateUI UpdateonclicktimeUI QueueJavaScript
- 87. After 25msUI ThreadJavaScriptUI UpdateUI UpdateonclicktimeUI Queue
- 88. After Another 25msUI ThreadJavaScriptUI UpdateUI UpdateonclicktimeUI QueueJavaScript
- 89. After Another 25msUI ThreadJavaScriptJavaScriptUI UpdateUI UpdateonclicktimeUI Queue
- 90. Technique #2: Script YieldingNEW!
- 92. //delay a function until after UI updates are donesetImmediate(function(){//code to execute here});setImmediate() adds code to the UI queue after pending UI updates are finished
- 93. Support for Script Yielding????10msSetIntermediate()
- 94. functionyieldingProcessArray(items, process, callback){//create a clone of the originalvartodo = items.concat();setImmediate(function(){var start = +new Date();do { process(todo.shift()); } while (todo.length > 0 && (+new Date() - start < 50));if (todo.length > 0){setImmediate(arguments.callee); } else { callback(items); }});}
- 95. When ClickedUI ThreadtimeUI QueueUI UpdateonclickUI Update
- 96. When ClickedUI ThreadUI UpdatetimeUI QueueonclickUI Update
- 97. When ClickedUI ThreadonclickUI UpdatetimeUI QueueUI Update
- 98. When ClickedUI ThreadUI UpdateUI UpdateonclicktimeUI Queue
- 99. After Last UI UpdateUI ThreadUI UpdateUI UpdateonclicktimeUI QueueJavaScript
- 100. After Last UI UpdateUI ThreadJavaScriptUI UpdateUI UpdateonclicktimeUI Queue
- 101. No Other UI UpdatesUI ThreadJavaScriptUI UpdateUI UpdateonclicktimeUI QueueJavaScript
- 102. No Other UI UpdatesUI ThreadJavaScriptJavaScriptUI UpdateUI UpdateonclicktimeUI Queue
- 103. Technique #3: Web Workers
- 105. Support for Web Workers10.64.03.54.010
- 106. Web WorkersAsynchronous JavaScript executionExecution happens outside the UI threadDoesn’t block UI updatesData-Driven APIData is serialized going into and out of the workerNo access to DOM or BOMSeparate execution environment
- 107. //in pagevar worker = new Worker("process.js");worker.onmessage = function(event){ useData(event.data);};worker.postMessage(values);//in process.jsself.onmessage = function(event){var items = event.data;for (var i=0,len=items.length; i < len; i++){ process(items[i]); } self.postMessage(items);};
- 108. When ClickedUI ThreadtimeUI QueueUI UpdateonclickUI Update
- 109. When ClickedUI ThreadUI UpdatetimeUI QueueonclickUI Update
- 110. When ClickedUI ThreadonclickUI UpdatetimeUI QueueUI Update
- 111. When ClickedUI ThreadonclickUI UpdatetimeUI QueueWorker ThreadUI Update
- 112. When ClickedUI ThreadUI UpdateUI UpdateonclicktimeUI QueueWorker ThreadJavaScript
- 113. Worker Thread CompleteUI ThreadUI UpdateUI UpdateonclicktimeUI Queueonmessage
- 114. Worker Thread CompleteUI ThreadonmessageUI UpdateUI UpdateonclicktimeUI Queue
- 115. Recap
- 116. The browser UI thread is responsible forboth UI updates and JavaScript executionOnly one can happen at a time
- 117. Responsive UIUI ThreadJavaScriptUI UpdateUI Updatetime
- 118. Unresponsive UIUI ThreadJavaScriptUI UpdateUI Updatetime
- 119. Avoid Slow Loading JavaScriptDynamically created scriptsDeferred scriptsAsynchronous scripts
- 120. Avoid Slow JavaScriptDon't allow JavaScript to execute for more than 50msBreak up long JavaScript processes using:TimersScript Yielding (future)Web Workers
- 123. EtceteraMy blog: www.nczonline.netTwitter: @slicknetThese Slides: slideshare.net/nzakasHire us: [email protected]
- 124. Questions?
- 125. Creative Commons Images Usedhttp://www.flickr.com/photos/lrargerich/3115367361/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/http://www.flickr.com/photos/torley/2361164281/http://www.flickr.com/photos/ottoman42/455242/http://www.flickr.com/photos/goincase/3843348908/
Editor's Notes
- #2: Over the past couple of years, we've seen JavaScript development earn recognition as a true discipline. The idea that you should architect your code, use patterns and good programming practices has really elevated the role of the front end engineer. In my opinion, part of this elevation has been the adoption of what has traditionally been considered back end methodologies. We now focus on performance and algorithms, there's unit testing for JavaScript, and so much more. One of the areas that I've seen a much slower than adoption that I'd like is in the area of error handling.How many people have an error handling strategy for their backend? How many have dashboards that display problems with uptime and performance? How many have anything similar for the front end?Typically, the front end has been this black hole of information. You may get a few customer reports here and there, but you have no information about what's going on, how often it's occurring, or how many people have been affected.
- #122: So what have we talked about? Maintainable JavaScript is made up of four components.First is Code Conventions that describe the format of the code you’re writing.Second is Loose Coupling – keeping HTML, JavaScript, and CSS on separate layers and keeping application logic out of event handlers.Third is Programming Practices that ensure your code is readable and easily debugged.Fourth is creating a Build Process