js的eventLoop事件循环

js代码是按顺序从上到下执行的，先执行同步任务，然后执行异步任务，那有两个或者更多异步任务的时候先执行哪个呢？这个就涉及到微任务和宏任务的概念了。

console.log(1);
setTimeout(function(){
  console.log(2)
},0)
new Pomise(function(resolve){
    console.log(3)
    resolve()
}).then(
  console.log(4)
)
console.log(5)

从上到下先输出1, 5，3
两个异步任务先执行谁呢？ setTimeout是宏任务, .then是微任务
先执行微任务后执行宏任务，输出4,2
这个时候我们就会有疑问，为什么微任务先于宏任务呢？
宏任务：DOM渲染后触发，如setTimeout
微任务：DOM渲染前触发，如Promise
我们通过实践验证一下：

 <div class="container"></div>
    <script>
     let container=document.querySelector('.container')
     const p1="<p> 第1行</p>"
     const p2="<p> 第2行</p>"
     const p3="<p> 第3行</p>"
     container.innerHTML=p1
     container.innerHTML+=p2
     container.innerHTML+=p3
     console.log('length:'+container.children.length)
     setTimeout(function(){
        const length=container.children.length
         alert(`定时器${length}`)
     },0)
     Promise.resolve().then(()=>{
         const length=container.children.length
         alert(`p：${length}`)
     })

1618053080(1).png 1618053100(1).png

图中可以看到，promise是在dom渲染之前，定时器是在dom渲染之后

微任务是ES6语法规定的
宏任务是浏览器规定的