There’s nothing more frustrating than clicking something on a web page and having nothing happen. This problem goes back to the origin of transactional web applications and resulted in the now-ubiquitous “please click only once” message that accompanies most form submissions. A user’s natural inclination is to repeat any action that doesn’t result in an obvious change, and so ensuring responsiveness in web applications is an important performance concern. Chapter 1 introduced the browser UI thread concept. As a recap, most browsers have a single process that is shared between JavaScript execution and user interface updates. Only one of these operations can be performed at a time, meaning that the user interface cannot respond to input while JavaScript code is executed and vice versa. The user interface effectively becomes “locked” when JavaScript is executing; managing how long your JavaScript takes to execute is important to the perceived performance of a web application.

1. Responsive Interfaces
Baris Aydinoglu
August 12, 2015

2. Agenda:
UI Thread
Browser UI Thread
Yielding with Timers
Web Workers

3. UI Thread

4. Two jobs:
Draw UI
Execute JS

5. ”No UI updates while JS running!!!

6. ”Long-running JS
⇓
Unresponsive UI

7. Browser UI Thread

8. ”Browser Limits

9. ”How Long Is Too Long?

10. ”How Long Is Too Long?
JS < 100ms

11. Yielding with Timers

12. Timer Basics:
Delay JS tasks >100ms to yield UI update

13. Timer Precision:
Timer resolution is 15ms in Windows
Delay <15ms locks IE
Recommended min 25ms

14. Array processing with timers
Splitting up tasks

15. Timer Example - v1

16. Timer Example - v2

17. Timer Example - v3

18. Timed Code:
10000 item * 25ms
Total delay < 50ms

19. ”Higher frequency
⇓
Slower app

20. Web Workers

21. Worker Environment:
Asynchronous JS execution
Not on the UI thread
No UI delays!!!

22. Worker Usage Example

23. Worker Communication:
Data-driven
Input/output serialized
No access to DOM/BOM

24. Worker Communication Example

25. Loading External Files:
Blocks worker script
NOT UI!!!

26. Loading External File Example

27. Practical Usage

28. Practical Usage

29. Go Deeper:
http: // www. html5rocks. com/ en/ tutorials/ workers/ basics
http: // w3c. github. io/ setImmediate
http: // www. w3. org/ TR/ html5/ webappapis. html# timers

30. ?

31. That’s all Folks!
@barisaydinoglu
github.com/barisaydinoglu
baris@aydinoglu.info