js是单线程的,也就是说,遇到同步任务和异步任务 会先去执行同步任务 然后再去执行异步任务
同步任务
当一个页面有多个同步任务时 这些同步任务会依次进入任务队列中执行 然后再去执行异步任务
异步任务
异步任务会在同步任务执行之后再去执行,在这之前,异步任务会先存放到任务队列中,也就是说,当异步任务出现时,会先将异步任务放到任务队列中,当执行完所有的同步任务之后,再去调用任务队列中的异步任务
例如下图。现在存在两个同步任务,两个异步任务
js会先将同步任务1提至主线程,然后发现异步任务1和异步任务2,这时会把异步任务放到任务队列中
然后同步任务1执行完毕之后 同步任务2进去主线程中
当同步任务2执行完毕之后,再去执行异步任务1
异步任务分类
在js中, 异步任务又分为宏任务和微任务
宏任务 又分为setTimeout setInterval ajax fetch script代码
微任务 又分为Promise的then、catch、finally,process.nextTick
注意:Promise的then等方法是微任务,而Promise中的代码是同步任务,并且,process的nextTick的执行顺序优先于Promise的then等方法,因为process.nextTick是告诉浏览器说要尽快执行,而不是放入队列
js中,微任务总是先于宏任务执行,也就是说,这三种任务的执行顺序是同步任务>微任务>宏任务
例如
<script>
console.log(1); //同步任务 直接输出 1
setTimeout(function(){ //宏任务 先放入宏任务队列中等待 最后执行宏任务 1 3 4 6 5 2
console.log(2)
},0)
new Promise((resolve,reject)=>{ //同步任务
console.log(3) // 同步任务直接输出 现在 1 3
resolve()
console.log(4) // 同步任务直接输出 现在 1 3 4
}).then(()=>{
console.log(5) //微任务 放入微任务队列中 先执行微任务 再执行宏任务 现在 1 3 4 6 5
})
console.log(6) //同步任务 直接输出 现在 1 3 4 6
</script>
//上述执行的结果是 1 3 4 6 5 2