JavaScript Async for Effortless UX

Page freeze, glitchy animation, and slow scrolling. They follow us everywhere, and we'd like them to stop. This talk will get to the bottom of these issues by delving into the Javascript engine and concepts like task, call-stack, and event-loops. I will also introduce several ways to tackle these problems and walk you through a demo to help you understand.

Transcript

1. Don't block the event loop! JavaScript Async for Effortless UX Jaeseok Kang (kang89kr@gmail.com)
2. Jaeseok Kang JSConf Korea 2019 JS
3. Jaeseok Kang JSConf Korea 2019 JSConf Korea 2019 Jaeseok Kang
4. I'm going to talk about..!
5. Cause Solution Problem
6. Cause Solution • "Page freeze.." • "Responding to user input too slow.." • "Glitchy animations.." • ... Problem • run-to-completion • javascript engine • call stack • event loop • task queue • ... • worker • scheduling • ...
7. This is an exploration for a better solution, not a clear solution. ⚠
8. User Experience Users' feelings about using a product, system or service https://userexperiencerocks.wordpress.com/2015/08/20/then-my-kiddo-asked-whats-the-difference-between-ux-ui/
9. • "Page freeze.." • "Responding to user input too slow.." • "Glitchy animations.."
10. Why do they happen? Something may be slowing things down and blocking others. #
11. Run-to-completion $
12. Run-to-completion • Each message is processed completely before any other message is processed. let running = true setTimeout(() => { console.log('Will it be print?') }, 500) while(true) { if (!running) { break } console.log('Running...', Date.now()) }
13. let running = true setTimeout(() => { console.log('Will it be print?') }, 500) while(true) { if (!running) { break } console.log('Running...', Date.now()) }
14. 1.set running to true let running = true setTimeout(() => { console.log('Will it be print?') }, 500) while(true) { if (!running) { break } console.log('Running...', Date.now()) }
15. 1.set running to true 2.run setTimeout function let running = true setTimeout(() => { console.log('Will it be print?') }, 500) while(true) { if (!running) { break } console.log('Running...', Date.now()) }
16. 1.set running to true 2.run setTimeout function 3.start while loop block let running = true setTimeout(() => { console.log('Will it be print?') }, 500) while(true) { if (!running) { break } console.log('Running...', Date.now()) }
17. 1.set running to true 2.run setTimeout function 3.start while loop block 4.check if running have changed let running = true setTimeout(() => { console.log('Will it be print?') }, 500) while(true) { if (!running) { break } console.log('Running...', Date.now()) }
18. 1.set running to true 2.run setTimeout function 3.start while loop block 4.check if running have changed 5.print log 'Running...' let running = true setTimeout(() => { console.log('Will it be print?') }, 500) while(true) { if (!running) { break } console.log('Running...', Date.now()) }
19. 1.set running to true 2.run setTimeout function 3.start while loop block 4.check if running have changed 5.print log 'Running...' 6.500ms later... running still true let running = true setTimeout(() => { console.log('Will it be print?') }, 500) while(true) { if (!running) { break } console.log('Running...', Date.now()) }
20. 1.set running to true 2.run setTimeout function 3.start while loop block 4.check if running have changed 5.print log 'Running...' 6.500ms later... running still true 7.running is true as ever.. let running = true setTimeout(() => { console.log('Will it be print?') }, 500) while(true) { if (!running) { break } console.log('Running...', Date.now()) }
21. 1.set running to true 2.run setTimeout function 3.start while loop block 4.check if running have changed 5.print log 'Running...' 6.500ms later... running still true 7.running is true as ever.. 8.and ever... let running = true setTimeout(() => { console.log('Will it be print?') }, 500) while(true) { if (!running) { break } console.log('Running...', Date.now()) }
22. 1.set running to true 2.run setTimeout function 3.start while loop block 4.check if running have changed 5.print log 'Running...' 6.500ms later... running still true 7.running is true as ever.. 8.and ever... 9. ...forever.... let running = true setTimeout(() => { console.log('Will it be print?') }, 500) while(true) { if (!running) { break } console.log('Running...', Date.now()) }
24. Call stack %
25. function hello() { console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf()
26. function hello() { console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf() main()
27. function hello() { console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf() helloJsConf() main()
28. function hello() { console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf() helloJsConf() hello() main()
29. function hello() { console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf() helloJsConf() hello() main() console.log("hello")
30. function hello() { console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf() helloJsConf() hello() main()
31. function hello() { console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf() helloJsConf() main()
32. function hello() { console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf() helloJsConf() main() console.log("jsConfKorea")
33. function hello() { console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf() helloJsConf() main()
34. function hello() { console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf() main()
35. function hello() { console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf()
36. Let’s say we have some expensive task &
37. function someExpensive() { ... } function hello() { someExpensive() console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf()
38. main() function someExpensive() { ... } function hello() { someExpensive() console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf()
39. helloJsConf() main() function someExpensive() { ... } function hello() { someExpensive() console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf()
40. helloJsConf() hello() main() function someExpensive() { ... } function hello() { someExpensive() console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf()
41. helloJsConf() hello() main() function someExpensive() { ... } function hello() { someExpensive() console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf() someExpensive()
42. helloJsConf() hello() main() function someExpensive() { ... } function hello() { someExpensive() console.log('hello') } function helloJsConf() { hello() console.log('JSConfKorea') } helloJsConf() someExpensive() '
43. How to handle concurrency in browser? ⚙
44. Web APIs ⏱ •dom events •XMLHttpRequest •setTimeout •Promise •requestAnimationFrame •... Event loop *
45. Event loop *
46. Event loop while(queue.waitForMessage()) { queue.processNextMessage() } https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop#Event_loop
47. Event loop • Event loop manages what task is to be pushed in the Callstack.
48. Event loop 1. While there are tasks: • execute the oldest task. 2. Sleep until a task appears, then go to 1.
49. setTimeout(() => { console.log('hello') }) Promise.resolve().then(() => { console.log('JSConfKorea') }) Call Stack Tasks Event Loop
50. setTimeout(() => { console.log('hello') }) Promise.resolve().then(() => { console.log('JSConfKorea') }) setTimeout() Call Stack Tasks Event Loop
51. setTimeout(() => { console.log('hello') }) Promise.resolve().then(() => { console.log('JSConfKorea') }) Call Stack Tasks Event Loop hello Task
52. setTimeout(() => { console.log('hello') }) Promise.resolve().then(() => { console.log('JSConfKorea') }) Promise.resolve.then() Call Stack Tasks Event Loop hello Task
53. Microtasks setTimeout(() => { console.log('hello') }) Promise.resolve().then(() => { console.log('JSConfKorea') }) Promise.resolve.then() Call Stack Tasks Event Loop hello Task
54. Microtasks setTimeout(() => { console.log('hello') }) Promise.resolve().then(() => { console.log('JSConfKorea') }) Call Stack Tasks Event Loop hello Task jsConfKorea Micro Task
55. Microtasks setTimeout(() => { console.log('hello') }) Promise.resolve().then(() => { console.log('JSConfKorea') }) Call Stack Tasks Event Loop hello Task jsConfKorea Micro Task ?
56. Task & Microtask •Task Task that should execute sequentially in browser Source : setTimeout, running scripts, UI events.. •Microtask Async task that should happen after the currently executing script Microtask queue has a higher priority than the task queue. Source : Promise, MutationObserver, process.nextTick
57. Event loop 1. While there are tasks: • execute the oldest task. 2. Sleep until a task appears, then go to 1.
58. Event loop - Detail 1. If the microtask queue is not empty, execute all microtasks 2. While there are tasks: • execute the oldest task. 3. Sleep until a task appears, then go to 1.
59. Call Stack Tasks Event Loop hello Task jsConfKorea Micro Task Microtasks setTimeout(() => { console.log('hello') }) Promise.resolve().then(() => { console.log('JSConfKorea') })
60. Call Stack Tasks Event Loop hello Task jsConfKorea Micro Task Microtasks setTimeout(() => { console.log('hello') }) Promise.resolve().then(() => { console.log('JSConfKorea') })
61. Call Stack Tasks Event Loop hello Task Microtasks setTimeout(() => { console.log('hello') }) Promise.resolve().then(() => { console.log('JSConfKorea') })
62. Call Stack Tasks Event Loop hello Task Microtasks setTimeout(() => { console.log('hello') }) Promise.resolve().then(() => { console.log('JSConfKorea') })
63. Call Stack Tasks Event Loop Microtasks setTimeout(() => { console.log('hello') }) Promise.resolve().then(() => { console.log('JSConfKorea') })
64. So... Can asynchronous JavaScript solve all the problems?
65. So... Can asynchronous JavaScript solve all the problems? +
66. function someExpensive() { ... } setTimeout(() => { console.log('hello JSConfKorea') }) Promise.resolve().then(() => { someExpensive() }) Call Stack Event Loop Tasks Microtasks
67. function someExpensive() { ... } setTimeout(() => { console.log('hello JSConfKorea') }) Promise.resolve().then(() => { someExpensive() }) setTimeout() Call Stack Event Loop Tasks Microtasks
68. function someExpensive() { ... } setTimeout(() => { console.log('hello JSConfKorea') }) Promise.resolve().then(() => { someExpensive() }) Call Stack Event Loop hello JSConfKorea Task Tasks Microtasks
69. function someExpensive() { ... } setTimeout(() => { console.log('hello JSConfKorea') }) Promise.resolve().then(() => { someExpensive() }) Promise.resolve.then() Call Stack Event Loop hello JSConfKorea Task Tasks Microtasks
70. function someExpensive() { ... } setTimeout(() => { console.log('hello JSConfKorea') }) Promise.resolve().then(() => { someExpensive() }) Call Stack Event Loop hello JSConfKorea Task someExpensive Micro Task Tasks Microtasks
71. function someExpensive() { ... } setTimeout(() => { console.log('hello JSConfKorea') }) Promise.resolve().then(() => { someExpensive() }) Call Stack Event Loop hello JSConfKorea Task someExpensive Micro Task Tasks Microtasks
72. function someExpensive() { ... } setTimeout(() => { console.log('hello JSConfKorea') }) Promise.resolve().then(() => { someExpensive() }) Call Stack Event Loop hello JSConfKorea Task someExpensive Micro Task ' Tasks Microtasks
73. • Task is always executed sequentially by event loop. Other task cannot be performed when any task is running. • Microtask queue has a higher priority than the task queue. So, UI-related events cannot be executed again until all microtasks accumulated in the queue are cleared. • What if long running stacked tasks or microtasks block event that is directly connected to UI such as rendering, click, input? janky UI/UX occurs... ,
74. How to handle this blocking? '
75. Demo https://github.com/jaeseokk/ui-block-demo
76. inputEl.addEventListener('input', (e) => { const textLength = e.target.value.length let result = '' for (let i; i < getSquareCounts(textLength); i++) { result += makeSquareWithRandomColorHtml() } containerEl.innerHTML = result })
77. inputEl.addEventListener('input', (e) => { const textLength = e.target.value.length let result = '' for (let i; i < getSquareCounts(textLength); i++) { result += makeSquareWithRandomColorHtml() } containerEl.innerHTML = result }) Too many iterations
78. inputEl.addEventListener('input', (e) => { const textLength = e.target.value.length let result = '' for (let i; i < getSquareCounts(textLength); i++) { result += makeSquareWithRandomColorHtml() } containerEl.innerHTML = result }) Too many iterations Costly DOM changes
81. •With another thread...? 
 - Web Workers •Split some expensive task into small tasks...? 
 - Scheduling
82. Web Workers •Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API
83. Main Thread Worker Thread 2. result = runLongRunningTask() 1. postMessage() 3. postMessage(result) 4. doSomethingWith(result)
84. self.addEventListener('message', e => { const result = runLongRunningTask() postMessage(result) }) // spawn a worker const worker = new Worker('worker.js') // send messages to a worker for request run long-runnging-task worker.postMessage(message) // handle a `message` event from a worker worker.onmessage = e => { doSomethingWith(e) } worker.js main.js
87. Limitations • Data is sent between workers and the main thread via a system of messages. • Worker cannot access directly the DOM, context.
88. Scheduling • Slice your heavy task in light sub-tasks and run them asynchronously.
89. Task Long Running Task Task Task Task
90. Task Task Task Task
91. function* chunkGenerator (textLength) { let result = '' for (let i = 0; i < getSquareCounts(textLength) / CHUNK_UNIT; i++) { for (let j = 0; j < CHUNK_UNIT; j++) { result = makeSquareWithRandomColorHtml() } yield } containerEl.innerHTML = result } inputEl.addEventListener('input', (e) => { const textLength = e.target.value.length runChunks(chunkGenerator(textLength)) }) inputEl.addEventListener('input', (e) => { const textLength = e.target.value.length let result = '' for (let i = 0; i < getSquareCounts(textLength); i++) { result += makeSquareWithRandomColorHtml() } containerEl.innerHTML = result }) AS-IS TO-BE https://github.com/jaeseokk/chunk-scheduler
94. inputEl.addEventListener('input', (e) => { const textLength = e.target.value.length if (isRunning()) { cancel() } runChunks(chunkGenerator(textLength)) })
97. Recap • If long-running-tasks or microtasks block rendering, click, and text input, a janky UI that harms user experience can be delivered can occur. • This is due to the structure of the JavaScript engine, event- loop, etc. and needs to understand and handle properly. • To handle this, Delegate long-running-tasks to other threads using Web Worker, • Or, split the long-running-task properly so that other important UI events do not block.
98. Thank you -