High Performance JavaScript - jQuery Conference SF Bay Area 2010
Upcoming SlideShare
Loading in...5
×
 

High Performance JavaScript - jQuery Conference SF Bay Area 2010

on

  • 15,554 views

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.

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.

Statistics

Views

Total Views
15,554
Views on SlideShare
14,756
Embed Views
798

Actions

Likes
55
Downloads
456
Comments
0

23 Embeds 798

http://www.slideshare.net 194
http://speakerrate.com 193
http://jokers-secret.blogspot.com 161
http://refact.blogspot.com 74
http://scheible.eu 56
http://scheible.it 46
https://scheible.it 27
http://onwebdev.blogspot.com 11
http://paper.li 8
http://us-w1.rockmelt.com 7
https://wiki.bouvet.no 5
http://translate.googleusercontent.com 3
http://a0.twimg.com 2
http://blog.gabrieleromanato.com 2
http://jokers-secret.blogspot.sg 1
http://vizzwebsolutions.com 1
http://jokers-secret.blogspot.ru 1
http://www.brijj.com 1
http://scheible.me 1
http://www.linkedin.com 1
http://blog.nikolaimuhhin.eu 1
http://www.scheible.eu 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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.
  • 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

High Performance JavaScript - jQuery Conference SF Bay Area 2010 High Performance JavaScript - jQuery Conference SF Bay Area 2010 Presentation Transcript

  • High Performance JavaScript Nicholas C. Zakas Principal Front End Engineer, Yahoo! jQuery Conference – SF Bay Area, April 24 2010
  • Principal Front End Engineer
  • Contributor
  • Author
  • Things I Know About JavaScript Professional Wrestling YUI jQuery
  • Does this matter?
  • Old computers ran slow applications Small amounts of CPU power and memory
  • New computers are generally faster but slow applications still exist More CPU + more memory = less disciplined application development
  • It's still possible to write slow JavaScript on the new, faster JavaScript engines
  • How can I improve JavaScript performance?
  • How can I improve JavaScript performance? How can I make this fast???
  • How can I improve JavaScript performance? How can I make this fast??? Why is this so slow?????
  • Many aspects conspire to make JavaScript slow Awareness is the first step to solution
  • The UI Thread The brains of the operation
  • The browser UI thread is responsible for both UI updates and JavaScript execution Only one can happen at a time
  • 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
  • <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>
  • Before Click UI Thread time UI Queue
  • When Clicked UI Thread time UI Queue UI Update onclick UI Update
  • When Clicked UI Thread UI Update time UI Queue onclick Draw down state UI Update
  • When Clicked UI Thread UI Update onclick time UI Queue UI Update
  • When Clicked UI Thread UI Update onclick UI Update time UI Queue Draw up state
  • No UI updates while JavaScript is executing!
  • 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>
  • A UI update must use the latest info available
  • Long-running JavaScript = Unresponsive UI
  • Responsive UI UI Thread UI Update JavaScript UI Update time
  • Unresponsive UI UI Thread UI Update JavaScript UI Update time
  • The runaway script timer prevents JavaScript from running for too long Each browser imposes its own limit (except Opera)
  • Internet Explorer
  • Firefox
  • Safari
  • Chrome
  • 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
  • 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
  • Translation: No single JavaScript job should execute for more than 100ms to ensure a responsive UI
  • Recommendation: Limit JavaScript execution to no more than 50ms
  • function processArray(items, process, callback){ for (var i=0,len=items.length; i < len; i++){ process(items[i]); } callback(); }
  • Timers to the rescue!
  • 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
  • JavaScript Timers • For complex processing, split up into timed functionality • Use timers to delay some processing for later
  • 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); }
  • When Clicked UI Thread time UI Queue UI Update onclick UI Update
  • When Clicked UI Thread UI Update time UI Queue onclick UI Update
  • When Clicked UI Thread UI Update onclick time UI Queue UI Update
  • When Clicked UI Thread UI Update onclick UI Update time UI Queue
  • After 25ms UI Thread UI Update onclick UI Update time UI Queue JavaScript
  • After 25ms UI Thread UI Update onclick UI Update JavaScript time UI Queue
  • After Another 25ms UI Thread UI Update onclick UI Update JavaScript time UI Queue JavaScript
  • After Another 25ms UI Thread UI Update onclick UI Update JavaScript JavaScript time UI Queue
  • Web Workers to the rescue!
  • 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
  • //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); };
  • When Clicked UI Thread time UI Queue UI Update onclick UI Update
  • When Clicked UI Thread UI Update time UI Queue onclick UI Update
  • When Clicked UI Thread UI Update onclick time UI Queue UI Update
  • When Clicked UI Thread UI Update onclick time Worker Thread UI Queue UI Update
  • When Clicked UI Thread UI Update onclick UI Update time Worker Thread UI Queue JavaScript
  • Worker Thread Complete UI Thread UI Update onclick UI Update time UI Queue onmessage
  • Worker Thread Complete UI Thread UI Update onclick UI Update onmessage time UI Queue
  • Web Workers Support 3.5 4.0 4.0
  • Repaint and Reflow UI update jobs
  • Long UI updates = Unresponsive UI
  • Unresponsive UI UI Thread UI Update JavaScript UI Update time
  • Long UI updates = Unresponsive UI = Frustrated users
  • JavaScript can cause long UI updates
  • A repaint occurs when a visual change doesn't require recalculation of layout Changes to visibility, colors (text/background), background images, etc.
  • 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!
  • 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
  • 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!
  • Repaints and reflows are queued up as JavaScript executes
  • Reflow var list = $("ul.items"); for (var i=0; i < 10; i++){ list.append("<li>Item #" + i + "</li>"); } Reflow x 10!
  • Limiting repaints/reflows improves overall performance
  • Solution #1 Perform DOM manipulations off-document
  • 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
  • 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
  • No reflow! Reflow!
  • Solution #2 Group Style Changes
  • Repaint! Reflow! $("span.example").css({ color: "red" }); $("span.example").css({ height: "100px" }); Reflow! $("span.example").css({ fontSize: "25px" }); $("span.example").css({ backgroundColor: "white" }); Repaint!
  • Grouping Style Changes .active { color: red; height: 100px; fontSize: 25px; background-color: white; } $("span.example").addClass("active"); Reflow!
  • Grouping Style Changes var item = document.getElementById("myItem"); item.style.cssText = "color:red;height:100px;" + "font-size:25px;background-color: white"); Reflow!
  • Solution #3 Avoid Accidental Reflow
  • Accidental Reflow $("div.example").css({ width: "100px"}); var width = $("div.example").width(); Reflow!
  • 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
  • Recap
  • Things I Know About JavaScript Professional Wrestling YUI jQuery
  • The browser UI thread is responsible for both UI updates and JavaScript execution Only one can happen at a time
  • Responsive UI UI Thread UI Update JavaScript UI Update time
  • Unresponsive UI UI Thread UI Update JavaScript UI Update time
  • Unresponsive UI UI Thread UI Update JavaScript UI Update time
  • Avoid Slow JavaScript • Don't allow JavaScript to execute for more than 50ms • Break up long JavaScript processes using: – Timers – Web Workers
  • 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
  • Questions?
  • Etcetera • My blog: www.nczonline.net • My email: nzakas@yahoo-inc.com • Twitter: @slicknet
  • 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/