1. Responsive Interfaces Nicholas C. Zakas Principal Front-end Engineer, Yahoo! Homepage Bayjax – April 13, 2010

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=&quot;btn&quot; style=&quot;font-size: 30px; padding: 0.5em 1em&quot;>Click Me</button> <script type=&quot;text/javascript&quot;> window.onload = function (){ document.getElementById(&quot;btn&quot;).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

16. Internet Explorer

17. Firefox

18. Safari

19. Chrome

21. How long is too long?

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

26. Timers to the rescue!

30. Web Workers to the rescue!