目录

Javascript是一门单线程语言

但是在运行时难免会遇到需要较长执行时间的任务如: 向后端服务器发送请求。 其他的任务不可能都等它执行完才执行的(同步)否则效率太低了, 于是异步的概念就此产生: 当遇到需要较长时间的任务时将其放入”某个地方”后继续执行其他同步任务, 等所有同步任务执行完毕后再poll(轮询)刚刚这些需要较长时间的任务并得到其结果

而处理异步任务的这一套流程就叫Event Loop即事件循环，是浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制, 于是更完善的说法是: Javascript是一门单线程非阻塞语言

  • 堆(heap): 用于存放JS对象的数据结构
  • 调用栈(stack): 同步任务会按顺序在调用栈中等待主线程依次执行
  • Web API: 是浏览器/Node 用于处理异步任务的地方
  • 回调队列(callbacks queue): 经过Web API处理好的异步任务会被一次放入回调队列中, 等一定条件成立后被逐个poll(轮询)放入stack中被主线程执行

回调队列(callbacks queue)进而可以细分为

  1. 宏任务(macroTasks)

    • script全部代码、
    • setTimeout、
    • setInterval、
    • setImmediate(浏览器暂时不支持，只有IE10支持，具体可见MDN)、
    • I/O、UI Rendering

  2. 微任务(microTasks)

    • Process.nextTick(Node独有)
    • MutationObserver
    • Promise、
    • Object.observe(废弃)
  1. 首先顺序执行初始化代码(run script), 同步代码放入调用栈中执行, 异步代码放入对应的队列中
  2. 所有同步代码执行完毕后,确认调用栈(stack)是否为空, 只有stack为为空才能开始按照队列的特性轮询执行 微任务队列中的代码
  3. 只有当所有微任务队列中的任务执行完后, 才能执行宏任务队列中的下一个任务

用流程图表示:

题目1:

  1. setTimeout(() => {
  2.     console.log(1)
  3. }, 0)
  4. Promise.resolve().then(
  5.     () => {
  6.         console.log(2)
  7.     }
  8. )
  9. Promise.resolve().then(
  10.     () => {
  11.         console.log(4)
  12.     }
  13. )
  14. console.log(3)

  1. 执行初始化代码

  2. 初始化代码执行完毕, 调用栈为空所以可以开始轮询执行微任务队列的代码

    1. 取出第一个任务到调用栈–打印2, 执行完后调用栈为空, 检查微任务队列是否还有任务有则执行

    2. 取出第二个任务到调用栈–打印4, 执行完后调用栈为空, 微任务队列为空, 第一个宏任务(run script)完成, 可以轮询宏任务队列的下一个任务

  3. 开始轮询执行宏任务队列中的下一个任务

于是这道题最终的结果是:

  1. 3 2 4 1

到这需要说明一个东西就是: setTimeout的回调执行是不算在run script中的, 具体原因我并未弄清, 有明白的同学欢迎解释

题目2:

  1. setTimeout(()=>{
  2.     console.log(1)
  3. }, 0)
  6. new Promise((resolve, reject) => {
  7.     console.log(2)
  8.     resolve()
  9. })
  10. .then(
  11.     () => {
  12.         console.log(3)
  13.     }
  14. )
  15. .then(
  16.     () => {
  17.         console.log(4)
  18.     }
  19. )
  20. console.log(5)

  1. 执行初始化代码

  2. 初始化代码执行完毕, 调用栈为空所以可以开始轮询执行微任务队列的代码

    1. 取出第一个任务到调用栈–打印3, 执行完后调用栈为空, 此时第一个then()返回的Promise有了状态、结果, 于是将第二个then()放入微任务队列中, 检查微任务队列是否还有任务有则执行

    1. 调用栈、微任务队列为空, 宏任务run script执行完毕

  3. 开始轮询执行宏任务队列中的下一个任务

于是这道题最终的结果是:

  1. 2 5 3 4 1

题目3:

  1. const first = () => {
  2.     return new Promise((resolve, reject) => {
  3.         console.log(3)
  4.         let p = new Promise((resolve, reject) => {
  5.             console.log(7)
  6.             setTimeout(() => {
  7.                 console.log(5)
  8.             }, 0)
  9.             resolve(1)
  10.         })
  11.         resolve(2)
  12.         p.then(
  13.             arg => {
  14.                 console.log(arg)
  15.             }
  16.         )
  17.     })
  18. }
  20. first().then(
  21.     arg => {
  22.         console.log(arg)
  23.     }
  24. )
  26. console.log(4)

  1. 执行初始化代码

  2. 初始化代码执行完毕, 调用栈为空所以可以开始轮询执行微任务队列的代码

    1. 取出第一个任务到调用栈–打印1, 执行完后调用栈为空, 检查微任务队列是否还有任务有则执行

    1. 调用栈、微任务队列为空, 宏任务run script执行完毕

  3. 开始轮询执行宏任务队列中的下一个任务

于是这道题最终的结果是:

  1. 3 7 4 1 2 5

题目4:

  1. setTimeout(()=>{
  2.     console.log(0)
  3. }, 0)
  6. new Promise((resolve, reject) => {
  7.     console.log(1)
  8.     resolve()
  9. })
  10. .then(
  11.     () => {
  12.         console.log(2)
  13.         new Promise((resolve, reject) => {
  14.             console.log(3)
  15.             resolve()
  16.         })
  17.         .then(
  18.             () => console.log(4)
  19.         )
  20.         .then(
  21.             () => console.log(5)
  22.         )
  23.     }
  24. )
  25. .then(
  26.     () => console.log(6)
  27. )
  29. new Promise((resolve, reject) => {
  30.     console.log(7)
  31.     resolve()
  32. })
  33. .then(
  34.     () => console.log(8)
  35. )

  1. 执行初始化代码

  2. 初始化代码执行完毕, 调用栈为空所以可以开始轮询执行微任务队列的代码

    1. 取出第一个任务到调用栈–执行onResolved中的所有代码, 很重要的地方是此时第一个new Promise的第二个then此时会被放入微任务队列中。 执行完后调用栈为空, 检查微任务队列是否还有任务有则执行

    1. 调用栈、微任务队列为空, 宏任务run script执行完毕

  3. 开始轮询执行宏任务队列中的下一个任务

于是这道题最终的结果是:

  1. 1 7 2 3 8 4 6 5 0

题目5:

  1. console.log('script start')
  3. async function async1() {
  4.     await async2()
  5.     console.log('async1 end')
  6. }
  7. async function async2() {
  8.     console.log('async2 end')
  9. }
  10. async1()
  12. setTimeout(function () {
  13.     console.log('setTimeout')
  14. }, 0)
  16. new Promise(resolve => {
  17.     console.log('Promise')
  18.     resolve()
  19. })
  20. .then(function () {
  21.     console.log('promise1')
  22. })
  23. .then(function () {
  24.     console.log('promise2')
  25. })
  27. console.log('script end')

  1. 执行初始化代码

  2. 初始化代码执行完毕, 调用栈为空所以可以开始轮询执行微任务队列的代码

    1. 取出第一个任务到调用栈–执行await后的所有代码, 执行完后调用栈为空, 检查微任务队列是否还有任务有则执行

    1. 调用栈、微任务队列为空, 宏任务run script执行完毕

  3. 开始轮询执行宏任务队列中的下一个任务

于是这道题最终的结果是:

  1. script start
  2. async2 end
  3. Promise
  4. script end
  5. async1 end
  6. promise1
  7. promise2
  8. setTimeout

终极题1:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <style>
  9.         .outer {
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: orange;
  13.         }
  15.         .inner {
  16.             width: 100px;
  17.             height: 100px;
  18.             background-color: salmon;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <div class="outer">
  25.         <div class="inner"></div>
  26.     </div>
  28.     <script>
  29.         var outer = document.querySelector('.outer')
  30.         var inner = document.querySelector('.inner')
  32.         new MutationObserver(function () {
  33.             console.log('mutate')
  34.         }).observe(outer, {
  35.             attributes: true,
  36.         })
  38.         function onClick() {
  39.             console.log('click')
  41.             setTimeout(function () {
  42.                 console.log('timeout')
  43.             }, 0)
  45.             Promise.resolve().then(function () {
  46.                 console.log('promise')
  47.             })
  49.             outer.setAttribute('data-random', Math.random())
  50.         }
  52.         inner.addEventListener('click', onClick)
  53.         outer.addEventListener('click', onClick)
  54.     </script>
  55. </body>
  56. </html>

  1. 执行初始化代码

  2. 初始化代码执行完毕, 调用栈为空所以可以开始轮询执行微任务队列的代码

    1. 取出第一个任务到调用栈–打印promise, 执行完后调用栈为空, 检查微任务队列是否还有任务有则执行

    1. 调用栈、微任务队列为空, 因为存在冒泡, 所以以上操作再进行一次

  3. 宏任务run script执行完毕, 调用栈、微任务队列为空可以轮询执行宏任务队列中的下一个任务

  4. 开始轮询执行宏任务队列中的下一个任务

  5. 微任务队列、调用栈为空, 继续轮询执行宏任务队列中的下一个任务

于是这道题最终的结果是:

  1. click
  2. promise
  3. mutate
  4. click
  5. promise
  6. mutate
  7. timeout
  8. timeout

不同浏览器下的不同结果(如果你的结果在这其中, 也是对的)

这里令人迷惑的点是: outer的冒泡执行为什么比outer的setTimeout先

那是因为:

  • 首先outer的setTimeout是一个宏任务, 它进入宏任务队列时是在了run script的后面
  • inner执行到mutate后run script并没有执行完, 而是还有一个outer.click的冒泡要执行
  • 只有执行完该冒泡后, run script才真正执行完(才可以执行下一个宏任务)

终极题2:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <style>
  9.         .outer {
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: orange;
  13.         }
  15.         .inner {
  16.             width: 100px;
  17.             height: 100px;
  18.             background-color: salmon;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <div class="outer">
  25.         <div class="inner"></div>
  26.     </div>
  28.     <script>
  29.         var outer = document.querySelector('.outer')
  30.         var inner = document.querySelector('.inner')
  32.         new MutationObserver(function () {
  33.             console.log('mutate')
  34.         }).observe(outer, {
  35.             attributes: true,
  36.         })
  38.         function onClick() {
  39.             console.log('click')
  41.             setTimeout(function () {
  42.                 console.log('timeout')
  43.             }, 0)
  45.             Promise.resolve().then(function () {
  46.                 console.log('promise')
  47.             })
  49.             outer.setAttribute('data-random', Math.random())
  50.         }
  52.         inner.addEventListener('click', onClick)
  53.         outer.addEventListener('click', onClick)
  54.         inner.click()   // 模拟点击inner
  56.     </script>
  57. </body>
  58. </html>

  1. 执行初始化代码, 这里与终极题1不同的地方在于: 终极题1的click是作为回调函数(dispatch), 而这里是直接同步调用的

  2. inner.click执行完毕, inner.click退栈, 由于调用栈并不为空, 所以不能轮询微任务队列, 而是继续执行run script(执行冒泡部分)
    需要注意: 由于outer.click的MutationObserver并未执行所以不会被再次添加进微任务队列中

  3. inner.click退栈, 宏任务run script执行完毕, run script也退栈 调用栈为空, 开始轮询微任务队列

  4. 调用栈、微任务队列为空, 开始轮询执行宏任务队列中的下一个任务

  5. 微任务队列、调用栈为空, 继续轮询执行宏任务队列中的下一个任务

于是这道题最终的结果是:

  1. click
  2. click
  3. promise
  4. mutate
  5. promise
  6. timeout
  7. timeout

参考文章:

一次弄懂Event Loop(彻底解决此类面试问题)

Tasks, microtasks, queues and schedules

版权声明：本文为fitzlovecode原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/fitzlovecode/p/event_loop.html