The Mystery of Event Loop in JavaScript
- 1. München Aachen Bamberg Berlin Boswil Đà Nẵng Dresden Grenoble Hamburg Köln Leipzig Nürnberg Prag Stuttgart Washington Zug The Mystery of Event Loop in JavaScript Trình Đức Trần Đà Nẵng, 04/01/2020
- 2. 04.01.20 2 Trình Đức Trần @tranductrinh
- 3. 04.01.20 3
- 4. 04.01.20 4
- 6. 04.01.20 6
- 7. 04.01.20 7 console.log('Zero'); setTimeout(() => console.log('One'), 0); Promise.resolve().then(() => console.log('Two')); console.log('Three');
- 9. 04.01.20 9 console.log('Zero'); setTimeout(() => console.log('One'), 0); Promise.resolve().then(() => console.log('Two')); console.log('Three');
- 10. 04.01.20 10 v8 SpiderMonkey JavaScriptCore
- 12. 04.01.20 12 JavaScript Engine Call stack
- 13. 04.01.20 13 JavaScript Engine Call stack Heap
- 14. 04.01.20 14 const minus = function(num1, num2) { return num1 - num2; } const sum = function(num1, num2) { minus(num1, num2); return num1 + num2; } sum(0, 1);
- 15. 04.01.20 15 const minus = function(num1, num2) { return num1 - num2; } const sum = function(num1, num2) { minus(num1, num2); return num1 + num2; } sum(0, 1); Call stack
- 16. 04.01.20 16 Call stack Global execution context const minus = function(num1, num2) { return num1 - num2; } const sum = function(num1, num2) { minus(num1, num2); return num1 + num2; } sum(0, 1);
- 17. 04.01.20 17 Call stack Global execution context const minus = function(num1, num2) { return num1 - num2; } const sum = function(num1, num2) { minus(num1, num2); return num1 + num2; } sum(0, 1);
- 18. 04.01.20 18 const minus = function(num1, num2) { return num1 - num2; } const sum = function(num1, num2) { minus(num1, num2); return num1 + num2; } sum(0, 1); Call stack Global execution context Function execution context (sum)
- 19. 04.01.20 19 const minus = function(num1, num2) { return num1 - num2; } const sum = function(num1, num2) { minus(num1, num2); return num1 + num2; } sum(0, 1); Call stack Global execution context Function execution context (sum) Function execution context (minus)
- 20. 04.01.20 20 const minus = function(num1, num2) { return num1 - num2; } const sum = function(num1, num2) { minus(num1, num2); return num1 + num2; } sum(0, 1); Call stack Global execution context Function execution context (sum)
- 21. 04.01.20 21 Call stack Global execution context const minus = function(num1, num2) { return num1 - num2; } const sum = function(num1, num2) { minus(num1, num2); return num1 + num2; } sum(0, 1);
- 22. 04.01.20 22 Demo
- 23. 04.01.20 23 JavaScript Engine Call stack Heap
- 24. 04.01.20 24 JavaScript Engine Call stack Heap JavaScript Runtime JavaScript Engine Call stack Heap
- 25. 04.01.20 25 JavaScript Engine Call stack Heap JavaScript Runtime JavaScript Engine Call stack Heap Web APIs DOM XMLHttpRequest setTimeout
- 26. 04.01.20 26 JavaScript Engine Call stack Heap JavaScript Runtime JavaScript Engine Call stack Heap Callback queue Web APIs DOM XMLHttpRequest setTimeout
- 27. 04.01.20 27 JavaScript Engine Call stack Heap JavaScript Runtime JavaScript Engine Call stack Heap Job queue Web APIs DOM XMLHttpRequest setTimeout Callback queue
- 28. 04.01.20 28 JavaScript Engine Call stack Heap JavaScript Runtime JavaScript Engine Call stack Heap Event loop Job queue Web APIs DOM XMLHttpRequest setTimeout Callback queue
- 29. 04.01.20 29 console.log('Zero'); setTimeout(() => console.log('One'), 0); Promise.resolve().then(() => console.log('Two')); console.log('Three');
- 30. 04.01.20 30 JavaScript Runtime JavaScript Engine Call stack Web APIs console.log('Zero'); setTimeout( () => console.log('One'), 0 ); Promise.resolve().then( () => console.log('Two') ); console.log('Three'); Event Loop Callback queueJob queue
- 31. 04.01.20 31 JavaScript Runtime JavaScript Engine Call stack Web APIs console.log('Zero'); setTimeout( () => console.log('One'), 0 ); Promise.resolve().then( () => console.log('Two') ); console.log('Three'); console.log('Zero'); Callback queueJob queue Event Loop
- 32. 04.01.20 32 JavaScript Runtime JavaScript Engine Call stack Web APIs console.log('Zero'); setTimeout( () => console.log('One'), 0 ); Promise.resolve().then( () => console.log('Two') ); console.log('Three'); Zero setTimeout( () => console.log('One’) , 0 ); Callback queueJob queue Event Loop
- 33. 04.01.20 33 JavaScript Runtime JavaScript Engine Call stack Web APIs Callback queue console.log('Zero'); setTimeout( () => console.log('One'), 0 ); Promise.resolve().then( () => console.log('Two') ); console.log('Three'); Job queue Zero Event Loop Promise.resolve().then( () => console.log('Two’) ); setTimeout
- 34. 04.01.20 34 JavaScript Runtime JavaScript Engine Call stack Web APIs Callback queue console.log('Zero'); setTimeout( () => console.log('One'), 0 ); Promise.resolve().then( () => console.log('Two') ); console.log('Three'); Job queue Zero () => console.log(‘One'); () => console.log(‘Two'); console.log('Three'); Event Loop
- 35. 04.01.20 35 JavaScript Runtime JavaScript Engine Call stack Web APIs Callback queue console.log('Zero'); setTimeout( () => console.log('One'), 0 ); Promise.resolve().then( () => console.log('Two') ); console.log('Three'); Job queue Zero () => console.log(‘One'); () => console.log(‘Two'); Three Event Loop
- 36. 04.01.20 36 JavaScript Runtime JavaScript Engine Call stack Web APIs Callback queue console.log('Zero'); setTimeout( () => console.log('One'), 0 ); Promise.resolve().then( () => console.log('Two') ); console.log('Three'); Job queue Zero () => console.log(‘One'); Three console.log(‘Two'); Event Loop
- 37. 04.01.20 37 JavaScript Runtime JavaScript Engine Call stack Web APIs Callback queue console.log('Zero'); setTimeout( () => console.log('One'), 0 ); Promise.resolve().then( () => console.log('Two') ); console.log('Three'); Job queue Zero () => console.log(‘One'); Three Two Event Loop
- 38. 04.01.20 38 JavaScript Runtime JavaScript Engine Call stack Web APIs Callback queue console.log('Zero'); setTimeout( () => console.log('One'), 0 ); Promise.resolve().then( () => console.log('Two') ); console.log('Three'); Job queue console.log(‘One'); Zero Three Two Event Loop
- 39. 04.01.20 39 JavaScript Runtime JavaScript Engine Call stack Web APIs Callback queue console.log('Zero'); setTimeout( () => console.log('One'), 0 ); Promise.resolve().then( () => console.log('Two') ); console.log('Three'); Job queue Zero Three Two One Event Loop
- 40. 04.01.20 40 JavaScript Engine Call stack Heap JavaScript Runtime JavaScript Engine Call stack Heap Event loop Job queue Web APIs DOM XMLHttpRequest setTimeout Callback queue
- 41. 04.01.20 41 Q&A
- 42. 04.01.20 42 My upcoming TechTalk ES6 to ESNext: An in-depth look In March 2020
- 43. 04.01.20 43 Innovation Implemented. mgm technology partners GmbH Frankfurter Ring 105a 80807 München Tel.: +49 (89) 35 86 80-0 Fax: +49 (89) 35 86 80-288 www.mgm-tp.com PragMünchen Berlin Hamburg Köln NürnbergGrenoble LeipzigDresdenBamberg ZugĐà NẵngAachen WashingtonStuttgart