原文：https://www.404forest.com/2017/07/18/how-javascript-actually-works-eventloop-and-uirendering/
结论:
微队列的执行，是“见缝插针”的，只要主线程调用栈为空，直接就会执行，它会抓住每一个空挡
一个小例子
构建两个嵌套的dom，给他们设置上相同的
click事件
<div class="outer">
<div class="inner"></div>
</div>
let $outer = document.querySelector('.outer')
let $inner = document.querySelector('.inner')
function onClick() {
console.log('click!')
setTimeout(() => {
console.log('setTimeout!')
}, 0)
Promise.resolve().then(() => {
console.log('Promise!')
})
}
$outer.addEventListener('click', onClick)
$inner.addEventListener('click', onClick)
// $inner.click() 在第二个测试中，我们通过 Javascript 触发 click 事件
image.png
情况一：点击内部的黄色dom，让事件自然冒泡上去
情况二：用dom.click()来触发某个事件
两种情况的输出结果
- 第一种
click!
Promise!
click!
Promise!
setTimeout!
setTimeout!
image.png
- 第二种
click!
click!
Promise!
Promise!
setTimeout!
setTimeout!
image.png
