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

浏览器事件环

js单线程（主线程）

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

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

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

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

执行逻辑图：

代码解析：

// 同步、异步代码执行比较
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>