宏任务与微任务

最新推荐文章于 2024-05-27 00:45:00 发布

凉拌水母丶

最新推荐文章于 2024-05-27 00:45:00 发布

阅读量263

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/ghc19980122/article/details/129099769

版权

JS 的执行机制

javascript是一门单线程语言，一切的 javascript 版的"多线程"都是用单线程模拟出来的。

多线程: 程序可以同一时间做几件事。单线程: 程序同一时间只能做一件事。

JS为什么需要异步?

如果JS中不存在异步，只能自上而下执行，如果上一行解析时间很长，那么下面的代码就会被阻塞。对于用户而言，阻塞就意味着"卡死"，这样就导致了很差的用户体验。

宏任务（macro-task）

宏任务是指宿主发起的任务（浏览器/node）。包括：

同步 script (整体代码)
定时器
事件绑定
ajax
回调函数
Node中fs可以进行异步的I/O操作
UI rendering

微任务（micro-task）

微任务是指 js 引擎发起的任务。包括：

process.nextTick：node中实现的api，把当前任务放到主栈最后执行，当主栈执行完，先执行nextTick，再到等待队列中找
Promise(async/await) ：Promise并不是完全的同步，在promise中是同步任务，执行resolve或者reject回调的时候，此时是异步操作，会先将then/catch等放到微任务队列。当主栈完成后，才会再去调用resolve/reject方法执行
MutationObserver：创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。

1、首先 JavaScript 引擎会执行一个宏任务，注意这个宏任务一般是指主干代码本身，也就是目前的同步代码 2、执行过程中如果遇到微任务，就把它添加到微任务任务队列中 3、宏任务执行完成后，立即执行当前微任务队列中的微任务，直到微任务队列被清空 4、微任务执行完成后，开始执行下一个宏任务如此循环往复，直到宏任务和微任务被清空。

例子：

console.log('script start');
setTimeout(function(){
    console.log('setTimeout');
},0);
new Promise(function(resolve){
    console.log('promise1');
    resolve();
    console.log('promise2');
}).then(function(){
    console.log('promise then');
});
console.log('script end');