持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

写在前面

最近看了下小伙伴的代码，发现一些小白经常会因为无法判断代码执行的时机而出现了一些莫名其妙的 Bug ,比如在使用 Vue 的过程中，经常因为 Dom 没加载完执行了 Dom 读取操作，导致了读取到的 Dom 元素为空的问题，这个时候小伙伴们经常就是盲猜，加个 this.$nextTick() 或者 setTimeout 来尝试解决问题，发现现象正常了，就万事大吉，又拿起了新的砖头，开始搬砖。这篇文章将通过对 JS 的事件循环进行学习，总结，让我们在下次重新遇到相关问题的时候，能够深入原理，从原理上理解 Bug 的原因，然后以正确的姿势解决 Bug，让这种 Bug 无处遁形！

JS 的单线程与异步

我们都知道无论是在浏览器环境下还是在 Nodejs 环境下，JS 的执行都是单线程的，在浏览器中，JS 的执行与 Dom 的渲染也是共用一个线程的，那么这就会出现一个问题，我们的程序会因为所有代码都同步执行出现某个任务被阻塞，出现“假死”状态，那么异步便是这些问题的解决方案，通过异步的方式，能够使代码不被阻塞，一旦出现需要等待的任务，将会放到队列里，等待任务完成后返回，而不是强制阻塞其他任务的执行

什么是异步

异步的分类

异步主要分为宏任务和微任务，宏任务主要包括 setTimeout、setInterval、ajax，而微任务则包括 promise、async、await

异步的执行时机

微任务的执行主要在下一轮 Dom 渲染之前执行，而宏任务在下一轮 Dom 渲染之后执行

异步执行代码演示

为了探究宏任务和微任务的执行时机，我们分别以 setTimeout 作为宏任务代表以及 promise 作为微任务代表，并在 JS 中进行 Dom 操作后执行，观察微任务和宏任务执行时 Dom 的渲染情况（即页面呈现出来的样子），需要注意的是，JS 中的 Dom 对象完成操作并不等于渲染完成。

<body>
  <script>
    // js 对 Dom 的操作
    const mynameDiv = document.createElement('div')
    mynameDiv.innerText = 'Yimwu'
    document.body.appendChild(mynameDiv)
    // EventLoop 测试
    console.info('testStart')
    Promise.resolve().then(() => {
      alert('Promise Alert')
    })
    setTimeout(() => {
      alert('Settimeout Alert')
    });
    console.info('testEnd')
  </script>
</body>

GIF 2022-6-5 1-01-39.gif

实验结果可以看出，当触发 Promise 的 alert 时，页面上并没有看到 Yimwu的字样，也就是 Dom 渲染在这个时候并没有完成，而当 Settimeout 的 alert 触发时，出现了Yimwu的字样，即 Dom 渲染已完成

Event Loop

如上图所示，理解了异步之后，Event Loop 就比较清晰了，顾名思义，事件循环，就是监听队列，按顺序执行任务的机制。在异步中我们了解到异步一共分为微任务和宏任务，其实微任务和宏任务在 Event Loop 中加入的是不同的两个队列。在 JS 中当执行完同步代码后，会将微任务加入到微任务队列（Microtask Queue），将宏任务加入到宏任务队列（Macrotask Queue），启动监听，持续监听并按队列执行微任务和宏任务，而微任务和宏任务的执行顺序在异步中已经做了详细的解释，即 微任务 --> Dom 渲染 --> 宏任务。

关于任务添加到队列里的时机可以这样子理解，以 settimeout 为例，当程序执行到 settimeout 时，将会在 settimeout 时间走完后，将任务加入宏任务队列，等待执行。

到这里，勤于思考的小伙伴可能会发现一个问题，如果当 settimeout 时间走完后，将任务加入宏任务队列里，但是队列里还有很多或者耗时非常大的任务在执行，那岂不是需要继续等待，那任务真正执行的时间也就和 settimeout 的时间不匹配了呀？？？？对的，确实如此，如果遇到真正极端的状况，那么确实会发生不匹配的问题，所以这可能也是 settimeout 一直被人诟病的原因之一吧~~