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.

High Performance JavaScript - jQuery Conference SF Bay Area 2010

35,061 views

Published on

Learn the inner workings of JavaScript to learn what makes things slow and how to speed them up. Heavily focused on DOM manipulation and UI updates.

Published in: Technology

High Performance JavaScript - jQuery Conference SF Bay Area 2010

  1. High Performance JavaScript Nicholas C. Zakas Principal Front End Engineer, Yahoo! jQuery Conference – SF Bay Area, April 24 2010
  2. Principal Front End Engineer
  3. Contributor
  4. Author
  5. Things I Know About JavaScript Professional Wrestling YUI jQuery
  6. Does this matter?
  7. Old computers ran slow applications Small amounts of CPU power and memory
  8. New computers are generally faster but slow applications still exist More CPU + more memory = less disciplined application development
  9. It's still possible to write slow JavaScript on the new, faster JavaScript engines
  10. How can I improve JavaScript performance?
  11. How can I improve JavaScript performance? How can I make this fast???
  12. How can I improve JavaScript performance? How can I make this fast??? Why is this so slow?????
  13. Many aspects conspire to make JavaScript slow Awareness is the first step to solution
  14. The UI Thread The brains of the operation
  15. The browser UI thread is responsible for both UI updates and JavaScript execution Only one can happen at a time
  16. 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
  17. <button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> <script type="text/javascript"> $(document).ready(function(){ $("#btn").bind("click",function(){ //do something }); }); </script>
  18. Before Click UI Thread time UI Queue
  19. When Clicked UI Thread time UI Queue UI Update onclick UI Update
  20. When Clicked UI Thread UI Update time UI Queue onclick Draw down state UI Update
  21. When Clicked UI Thread UI Update onclick time UI Queue UI Update
  22. When Clicked UI Thread UI Update onclick UI Update time UI Queue Draw up state
  23. No UI updates while JavaScript is executing!
  24. JavaScript May Cause UI Update <button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> <script type="text/javascript"> $(document).ready(function(){ $("#btn").bind("click",function(){ $("body").append("<div class="tip">You " + "clicked me!</div>”); }); }); </script>
  25. A UI update must use the latest info available
  26. Long-running JavaScript = Unresponsive UI
  27. Responsive UI UI Thread UI Update JavaScript UI Update time
  28. Unresponsive UI UI Thread UI Update JavaScript UI Update time
  29. The runaway script timer prevents JavaScript from running for too long Each browser imposes its own limit (except Opera)
  30. Internet Explorer
  31. Firefox
  32. Safari
  33. Chrome
  34. 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
  35. 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
  36. Translation: No single JavaScript job should execute for more than 100ms to ensure a responsive UI
  37. Recommendation: Limit JavaScript execution to no more than 50ms
  38. function processArray(items, process, callback){ for (var i=0,len=items.length; i < len; i++){ process(items[i]); } callback(); }
  39. Timers to the rescue!
  40. 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
  41. JavaScript Timers • For complex processing, split up into timed functionality • Use timers to delay some processing for later
  42. 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); }
  43. When Clicked UI Thread time UI Queue UI Update onclick UI Update
  44. When Clicked UI Thread UI Update time UI Queue onclick UI Update
  45. When Clicked UI Thread UI Update onclick time UI Queue UI Update
  46. When Clicked UI Thread UI Update onclick UI Update time UI Queue
  47. After 25ms UI Thread UI Update onclick UI Update time UI Queue JavaScript
  48. After 25ms UI Thread UI Update onclick UI Update JavaScript time UI Queue
  49. After Another 25ms UI Thread UI Update onclick UI Update JavaScript time UI Queue JavaScript
  50. After Another 25ms UI Thread UI Update onclick UI Update JavaScript JavaScript time UI Queue
  51. Web Workers to the rescue!
  52. 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
  53. //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); };
  54. When Clicked UI Thread time UI Queue UI Update onclick UI Update
  55. When Clicked UI Thread UI Update time UI Queue onclick UI Update
  56. When Clicked UI Thread UI Update onclick time UI Queue UI Update
  57. When Clicked UI Thread UI Update onclick time Worker Thread UI Queue UI Update
  58. When Clicked UI Thread UI Update onclick UI Update time Worker Thread UI Queue JavaScript
  59. Worker Thread Complete UI Thread UI Update onclick UI Update time UI Queue onmessage
  60. Worker Thread Complete UI Thread UI Update onclick UI Update onmessage time UI Queue
  61. Web Workers Support 3.5 4.0 4.0
  62. Repaint and Reflow UI update jobs
  63. Long UI updates = Unresponsive UI
  64. Unresponsive UI UI Thread UI Update JavaScript UI Update time
  65. Long UI updates = Unresponsive UI = Frustrated users
  66. JavaScript can cause long UI updates
  67. A repaint occurs when a visual change doesn't require recalculation of layout Changes to visibility, colors (text/background), background images, etc.
  68. Repaint <button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> <script type="text/javascript"> $(document).ready(function(){ $("#btn").bind("click",function(){ $(this).css({ color: "#f00" }); }); }); </script> Repaint!
  69. A reflow occurs when a visual change requires a change in layout Initial page load ▪ browser resize ▪ DOM structure change ▪ layout style change layout information retrieved
  70. Reflow <button id="btn" style="font-size: 30px; padding: 0.5em 1em">Click Me</button> <script type="text/javascript"> $(document).ready(function(){ $("#btn").bind("click",function(){ $("body").append("<div class="tip">You " + "clicked me!</div>”); }); }); </script> Reflow!
  71. Repaints and reflows are queued up as JavaScript executes
  72. Reflow var list = $("ul.items"); for (var i=0; i < 10; i++){ list.append("<li>Item #" + i + "</li>"); } Reflow x 10!
  73. Limiting repaints/reflows improves overall performance
  74. Solution #1 Perform DOM manipulations off-document
  75. Off-Document Operations • Fast because there's no repaint/reflow • Techniques: – Remove element from the document, make changes, insert back into document – Set element's display to “none”, make changes, set display back to default – Build up DOM changes on a DocumentFragment then apply all at once
  76. DocumentFragment • A document-like object • Not visually represented • Considered to be owned by the document from which it was created • When passed to appendChild(), appends all of its children rather than itself
  77. No reflow! Reflow!
  78. Solution #2 Group Style Changes
  79. Repaint! Reflow! $("span.example").css({ color: "red" }); $("span.example").css({ height: "100px" }); Reflow! $("span.example").css({ fontSize: "25px" }); $("span.example").css({ backgroundColor: "white" }); Repaint!
  80. Grouping Style Changes .active { color: red; height: 100px; fontSize: 25px; background-color: white; } $("span.example").addClass("active"); Reflow!
  81. Grouping Style Changes var item = document.getElementById("myItem"); item.style.cssText = "color:red;height:100px;" + "font-size:25px;background-color: white"); Reflow!
  82. Solution #3 Avoid Accidental Reflow
  83. Accidental Reflow $("div.example").css({ width: "100px"}); var width = $("div.example").width(); Reflow!
  84. What to do? • Minimize access to layout information – offsetTop, offsetLeft, offsetWidth, offsetHeight – scrollTop, scrollLeft, scrollWidth, scrollHeight – clientTop, clientLeft, clientWidth, clientHeight – Most computed styles • If a value is used more than once, store in local variable
  85. Recap
  86. Things I Know About JavaScript Professional Wrestling YUI jQuery
  87. The browser UI thread is responsible for both UI updates and JavaScript execution Only one can happen at a time
  88. Responsive UI UI Thread UI Update JavaScript UI Update time
  89. Unresponsive UI UI Thread UI Update JavaScript UI Update time
  90. Unresponsive UI UI Thread UI Update JavaScript UI Update time
  91. Avoid Slow JavaScript • Don't allow JavaScript to execute for more than 50ms • Break up long JavaScript processes using: – Timers – Web Workers
  92. Avoid Long UI Updates • Be careful of repaint and reflow • Perform complex DOM operations off- document – Remove elements and re-add them – Use DocumentFragment objects • Group style changes together • Avoid accidental reflow
  93. Questions?
  94. Etcetera • My blog: www.nczonline.net • My email: nzakas@yahoo-inc.com • Twitter: @slicknet
  95. Creative Commons Images Used • http://www.flickr.com/photos/lrargerich/3115367361/ • http://www.flickr.com/photos/photomonkey/93277011/ • 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/

×