浏览器事件环机制解析宏任务微任务执行顺序

痛定思痛。 2023-07-22 09:14 6阅读 0赞

### 浏览器事件环 ###

js单线程（主线程）

宏任务：js渲染 ui渲染 定时器(setTimeout/setInterval/setImmdiate) I/o

微任务：promise process.nextTick Object.observe MutationObserver

Vue.nextTick(function() \{\}) 既使用宏任务又使用微任务。优先使用Promise,再H5api（MutationObserver），setTimeout、setImmdiate

script宏任务先执行,之后的执行过程都是先清空微任务 再执行宏任务

执行逻辑图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM1MzY3OQ_size_16_color_FFFFFF_t_70]  
代码解析：

// 同步、异步代码执行比较
    console.log(1);
    setTimeout(() => { 
        console.log(3333);
    }, 0);
    setTimeout(() => { 
        console.log(2222);
    }, 100);
    setTimeout(() => { 
        console.log(1111);
    }, 1000);
    console.log(2);
    
    // 执行结果 1 2 3333 2222 1111
    
    // 宏任务 微任务 针对异步定义
    // 宏任务
    setTimeout(() => { 
        console.log('timeout1');
    }, 0);
    // 微任务 优先执行
    Promise.resolve().then(() => { 
        console.log('success');
    });
    Promise.resolve().then(() => { 
        console.log('success2');
    });
    // 执行结果 success success2 timeout1
    
    
    setTimeout(() => { 
        console.log('timeout1');
        Promise.resolve().then(() => { 
            console.log('success');
        });
    }, 0);
    
    
    Promise.resolve().then(() => { 
        console.log('success2');
        setTimeout(() => { 
            console.log('timeout2');
        })
    });
    
    Promise.resolve().then(() => { 
        console.log('success3');
    });
    
    // success2 success3 timeout1 success timeout2

##### MutationObserver() #####

<div id="app"></div>
        <script>
            let mutationObserver = new MutationObserver(function() { 
                console.log(app.children.length);
            });
            mutationObserver.observe(app, { 
                childList: true
            });
            for (var i = 0; i < 10; i++) { 
                app.appendChild(document.createElement('p'));
            }
        </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM1MzY3OQ_size_16_color_FFFFFF_t_70]: /images/20230528/94ff97ff544b43ee8cc6b06516c57912.png