javascript 执行机制（同步、异步、微任务、宏任务）

2022-08-18 11:00:43 阅读：150 来源： 互联网

标签：异步同步 console log javascript 任务 Promise

一、关于javascript
JS是一门单线程语言，这意味着所有的任务都需要排队，前一个任务结束才会执行后一个任务如果前一个任务耗时很长，后一个任务就不得不一直等着。
这样所导致的问题是：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

二、同步任务和异步任务
单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待。
为了解决这个问题，利用多核 CPU 的计算能力，HTML5 提出 Web Worker 标准，允许 JS 脚本实现“多个线程”（JS是单线程这一核心仍未改变。所以一切"多线程"都是用单线程模拟出来的），但是子线程完全受主线程控制。于是，JS 中出现了同步任务和异步任务。

1.同步任务
同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。
比如有五个顾客来到了你的饭店，同步的做法是：先给第一个顾客点菜，然后做菜，结束后再给第二个人…以此类推。

2.异步任务
异步任务：不进入主线程、而进入”任务队列”的任务，当主线程中的任务运行完了，才会从”任务队列”取出异步任务放入主线程执行。
比如有五个顾客来到了你的饭店，异步的做法是：先给每一个顾客点菜，点完之后给他们一个牌子并把对应的菜单放到后厨然后让他们等待，之后后厨根据他们的菜单开始做菜。

三、微任务和宏任务
异步任务又分为微任务和宏任务。

1.微任务
包括Promise，process.nextTick

Promise(async/await) => Promise并不是完全的同步，在promise中是同步任务，执行resolve或者reject回调的时候，此时是异步操作，会先将then/catch等放到微任务队列。当主栈完成后，才会再去调用resolve/reject方法执行

process.nextTick （node中实现的api，把当前任务放到主栈最后执行，当主栈执行完，先执行nextTick，再到等待队列中找）

MutationObserver （创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。）

2.宏任务
包括整体代码script，setTimeout，setInterval

定时器

事件绑定

ajax

回调函数

Node中fs可以进行异步的I/O操作

四、执行顺序
执行顺序总结：先做同步任务，在做异步任务，异步任务又分为微任务和宏任务，先做微任务在做宏任务。
同步任务 => 异步任务（微任务 => 宏任务）
需要知道的是JS是单线程的，他的异步编程仅仅是根据某些机制来管控任务的执行顺序，所以并不存在同时执行两个任务这一说法。

五、示例

console.log("同步任务1");

function workFun(mac) {
    console.log("同步任务2");
    if (mac) {
        console.log(mac);
    }
    return new Promise((resolve, reject) => {
        console.log("Promise中的同步任务");
        resolve("Promise中回调的异步微任务")
    })
}
setTimeout(() => {
    console.log("异步任务中的宏任务");
    setTimeout(() => {
        console.log("定时器中的定时器（宏任务）");

    }, 0)
    workFun("定时器传递任务").then(res => {
        console.log('定时器中的:', res);
    })
}, 0)
workFun().then(res => {
    console.log(res);
})
console.log("同步任务3")

/*
** 同步任务1 
同步任务2
Promise中的同步任务
同步任务3
Promise中回调的异步微任务

异步任务中的宏任务
同步任务2
定时器传递任务
Promise中的同步任务
定时器中的: Promise中回调的异步微任务
定时器中的定时器（宏任务）
*/

标签：异步,同步,console,log,javascript,任务,Promise
来源： https://www.cnblogs.com/lgnblog/p/16597945.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript 执行机制（同步、异步、微任务、宏任务）