Responsive interfaces
•Download as PPT, PDF•
27 likes•18,212 views
The document discusses responsive interfaces and how to keep the user interface responsive when executing JavaScript. It explains that the UI thread is used for both drawing updates and running JavaScript, so no updates can happen while JavaScript runs. It recommends keeping JavaScript execution under 50ms to avoid unresponsiveness, and describes using timers and web workers to split processing over multiple ticks to keep the UI responsive.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (7)
Similar to Responsive interfaces
Similar to Responsive interfaces (20)
More from Nicholas Zakas
More from Nicholas Zakas (8)
Responsive interfaces
- 1. Responsive Interfaces Nicholas C. Zakas Principal Front-end Engineer, Yahoo! Homepage Bayjax – April 13, 2010
- 2. The UI Thread Two jobs: Draw UI updates Execute JavaScript Only one job can happen at a time Jobs are added to a queue if they are generated while the UI thread is busy
- 3. <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>
- 4. When Clicked A button UI change job is created Draws the button in the down state A JavaScript execution job is created The onclick event handler A button UI change job is created Draws the button in the up state
- 5. Before Click Start UI Thread UI Queue
- 6. When Clicked Start UI Thread onclick UI Queue
- 7. When Clicked Start UI Thread onclick UI Queue
- 8. When Clicked onclick Start UI Thread UI Queue
- 9. When Clicked onclick Start UI Thread UI Queue
- 10. No UI updates while JavaScript is executing!
- 11. Why?
- 12. 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>
- 13. UI updates must use the latest info available
- 14. Long-running JavaScript = Unresponsive UI
- 15. Runaway Script Timer Designed to prevent the browser from affecting the operating system Limits the amount of time a script is allowed to execute Two types of limits: Execution time Number of statements Always pops up a scary dialog to the user Exception: Opera has no runaway timer
- 17. Firefox
- 18. Safari
- 19. Chrome
- 20. 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
- 21. How long is too long?
- 22. 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
- 23. Translation: JavaScript should not execute for longer than 100ms to ensure responsive UI
- 24. Recommendation: Limit JavaScript to no more than 50ms at a time
- 25. function processArray(items, process, callback){ for ( var i=0,len=items.length; i < len; i++){ process(items[i]); } callback(); }
- 26. Timers to the rescue!
- 27. 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
- 28. JavaScript Timers For complex processing, split up into timed functionality Use timers to delay some processing for later
- 29. 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); }
- 30. Web Workers to the rescue!
- 32. 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
- 33. //in page var worker = new Worker("code.js"); worker.onmessage = function (event){ alert(event.data); }; worker.postMessage("Nicholas"); //in code.js self.onmessage = function (event){ self.postMessage("Hello, " + event.data + "!"); };
- 34. Web Workers Support Firefox 3.5 Safari 4 Chrome 4
- 35. Summary UI thread is used both for JavaScript execution and UI updates UI cannot be updated while JavaScript is executing Keep JavaScript execution to 50ms – use timers and/or web workers to offload processing
- 36. Etcetera My blog: www.nczonline.net My email: [email_address] Twitter: @slicknet
Editor's Notes
- 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