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.

1. Don't block the event loop!
JavaScript Async for Effortless UX
Jaeseok Kang
(kang89kr@gmail.com)

2. Jaeseok Kang
JSConf Korea 2019JS

3. Jaeseok Kang
JSConf Korea 2019JSConf Korea 2019
Jaeseok Kang

4. I'm going to talk about..!

5. Cause SolutionProblem

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. TaskLong Running Task TaskTask Task

90. Task TaskTask 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 -