浏览器的微任务MicroTask和宏任务MacroTask

最新推荐文章于 2023-05-14 15:54:08 发布

caoliangya520

最新推荐文章于 2023-05-14 15:54:08 发布

阅读量1.2k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45494667/article/details/107296746

版权

简介

同步任务（MainTask）
：同步任务是指JavaScript按照正常顺序执行的代码，比如：函数调用，数值运算等等，只要是执行后立即能够得到结果的就是同步任务。
宏任务（MacroTask）：setTimeout、setInterval、I/O、UI渲染
微任务（MicroTask）：Promise、Object.obsever、MutationObsever 用户交互事件（User
Interaction Event）：点击事件onclick、键盘事件onkeywodn、鼠标事件onmouseover等等

执行顺序

在这里插入图片描述
具体流程：

执行完主逻辑中的同步任务
取出微任务队列（MicroTask Queue）中的任务执行，直到队列被完全清空取出宏任务队列（MacroTask
Queue）中的一个任务执行。
取出微任务队列（MicroTask Queue）中的任务执行，直到队列被完全清空重复 3 和 4，直到宏任务队列（MacroTask
Queue）被清空。

在这里插入图片描述

demo1：宏任务(MacroTask)和微任务(MicroTask)执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1：宏任务(MacroTask)和微任务(MicroTask)执行顺序</title>
</head>
<body>
    <script type="text/javascript">
        console.log('同步任务1 start');
        setTimeout(function () {
            console.log('宏任务1：setTimeout...');
        }, 0);
        Promise.resolve().then(function () {
            console.log('微任务1 Promise.then() 1')
        }).then(function () {
            console.log('微任务2 Promise.then() 2')
        });
        setTimeout(function () {
            console.log('宏任务2：setTimeout...');
            Promise.resolve().then(function () {
                console.log('宏任务2：setTimeout => 微任务 Promise.then()')
            });
        }, 0);
        setTimeout(function () {
            console.log('宏任务3：setTimeout...');
        }, 0);
        Promise.resolve().then(function () {
            console.log('微任务3 Promise.then() 1')
        }).then(function () {
            console.log('微任务3 Promise.then() 2')
        })
        console.log('同步任务2 end');
    </script>
</body>
</html>

运行结果
在这里插入图片描述

function logic() {
    console.log(Date.now());
    setTimeout(logic, 1000);
}
logic();

demo3：setInterval宏任务和微任务深入


```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo1：setTimeout与setInterval</title>
</head>
<body>
    <div class="demo">demo</div>
    <script type="text/javascript">
        console.log('同步任务1 start');
        setInterval(() => {
            console.log('宏任务1：setInterval...');
            Promise.resolve().then(function () {
                console.log('宏任务1：setInterval => 微任务1 Promise.then()')
            });
            Promise.resolve().then(function () {
                console.log('宏任务1：setInterval => 微任务2 Promise.then()')
            });
            Promise.resolve().then(function () {
                console.log('宏任务1：setInterval => 微任务3 Promise.then()')
            });
        }, 3000);
        setTimeout(function () {
            console.log('宏任务2：setTimeout...');
        }, 0);
        // 微任务：监听DOM属性变化，当属性发生变化时触发回调函数
        const demo = document.querySelector('.demo');
        new MutationObserver(() => {
            console.log('MutationObserver Callback...');
        }).observe(demo, { attributes: true });

        Promise.resolve().then(function () {
            console.log('微任务1 Promise.then() 1')
            Promise.resolve().then(() => {
                console.log('微任务1-1 Promise.then() 1')
            });
            Promise.resolve().then(() => {
                console.log('微任务1-2 Promise.then() 2')
                Promise.resolve().then(() => {
                    console.log('微任务1-2-1 Promise.then() 1')
                });
            });
        });
        // 修改DOM元素属性，将回调变化回调函数放入微任务队列中
        demo.setAttribute('data-random', Math.random());
        console.log('同步任务2 end');
    </script>
</body>
</html>