看了多篇关于js事件循环机制解读的博文，知识点不少，做个笔记。对于自己而言好记性不如烂笔头嘛~(╹▽╹)。不想看的可以撸到底部看看大佬们写得优质博文。
先看个简单的代码：
console.log('a')
setTimeout(() => {
console.log('b')
}, 0)
console.log('c')
// 输出 a c b
为什么呢？首先你得明白最重要的一点是：js是单线程的！
单线程就意味着所有的任务都得按顺序执行，都要排队！下一任务必须等上一个任务执行完才能执行；如果上一个任务执行时间很长那下一个任务就得一直等着，这不明显是搞事情嘛(＃￣～￣＃)。就很烦！
这就造成CPU利用率不高，很多时候CPU是闲着没事干的；JavaScript设计者当然也知道啊；于是任务就分成了‘同步’和‘异步’两种。也就有了事件循环机制(Event Loop)。
这里setTimeout是异步的，所以回调会在最后执行。这又和js的事件循环机制有关。
事件循环机制如下：
- 所有的同步任务进入主线程，异步任务进入任务队列。
- 当指定的任务执行完，会进入任务队列事件，告知主线程该任务已近执行完毕。
- 当主线程的任务执行完，就会读取任务队列已经执行完的任务，后进入主线程执行。
- 以上过程js会不断重复，这就是Js的事件循环(Event Loop)。
eventLoop主要的流程就是以上的内容，现在来看个稍微复杂一丢丢的代码：
setTimeout(() => {
console.log(1)
setTimeout(() => {
console.log(4)
},0)
},0)
console.log(2)
new Promise((resolve, reject) => {
console.log(5)
resolve()
}).then(() => {
console.log(6)
})
console.log(3)
// 输出 2 5 3 6 1 4
你可能会疑惑为什么promise.then的回调要比setTimeout的先执行呢？
这就涉及到宏任务(macrotask) 和 微任务(microtask)的知识点了。
宏任务(macrotask) 和 微任务(microtask)
宏任务和微任务都是异步任务，都属于异步任务队列。区别在于它们的执行顺序不同。
异步任务那么多，哪些是macrotask，哪些是microtask？
常见的macrotask任务源有以下几种：
- 事件回调
- XHR 回调
- IndexDB 数据库操作等 I/O
- setTimeout / setInterval / setImmediate(ps: setImmediate有兼容性问题)
- MessageChannel
- history.back
一般microtask 包括
- Promise.then
- MutationObserver
- Object.observe
关于macrotask（task）和microtask的总结
- 每个 eventloop 由三个阶段构成：执行一个 task，执行 microtask 队列，可选的 ui render 阶段，
- tasks按序执行，浏览器会在 tasks 之间执行渲染。
- microtasks 按序执行，在下面情况时执行:
1 、microtask 执行时机『尽可能早』，只要 javascript 执行栈为空，就会执 行。即在每个回调之后，只要没有其它代码正在运行。一轮 eventloop 中，可能执行多次 microtask
2、在每个 task 的末尾（同一次事件循环中, 微任务永远在宏任务之前执行。）
Promise.then为微任务，所以在主线程执行完后会立即执行，微任务执行完才执行下一个task（setTimeout）
多个setTimeout和setInterval，为什么建议使用setTimeout而不建议使用setInterval
setTimeout是每过n秒回执行一次，而setInterval每n秒就会执行一次。听起来有点绕，但结合js eventLoop就好理解了。setInterval每n秒就会往异步队列里注入回调函数，如果有一个回调函数执行时间很长，此时队列已有多个回调，之后这些回调就可能看不出有时间间隔。
以前对于这个不是很理解，现在明白事件循环机制后就理解了。emmm...o(￣︶￣)o，就很棒！
可能我说的不是很清楚，自己可以多多查找资料，理解理解~
其它一些零碎的知识点
setTimeout(fn, 0)：有时我们用这种方法让代码延迟执行。置于为什么，相信你理解了js的eventLoop之后也就明白了。这里要说的是设置的0秒实际是达不到的，因为html标准最低是4ms。
关于16.7ms的问题：主流的屏幕刷新率都在60hz，即1秒60帧，比如动画看起来要流畅不掉帧，此时得在16.7ms内渲染完成才能不掉帧，所以时间间隔为16.7ms会比较合适
PS：本人比较少写文章，不足之处多多谅解，有错的地方欢迎指正。
资料来源：
JavaScript 运行机制详解：再谈Event Loop
JS事件循环机制（event loop）之宏任务/微任务
[译]Tasks, microtasks, queues and schedules
深入探究 eventloop 与浏览器渲染的时序问题
https://github.com/YvetteLau/Blog/issues/4
网友评论