js事件循环

1 js的事件循环

js 是一门单线程语言，为了协调事件，用户交互，脚本， UI渲染方面和网络处理等行为，浏览器引擎必须使用eventLoop。本文主要讨论浏览器引擎的eventLoop。 node的eventLoop是有libuv实现的。

2 微任务和宏任务

宏任务（macroTask）主要包括script 整体代码， setTimeOut，setInterval，I/O， UI交互事件，
微任务（microTask）主要包括promise， mutationObserve，process.nextTick (node);

3 宏任务和微任务的执行顺序

先读取script整体代码（宏任务），识别的微任务和宏任务分别push进任务队列，然后执行所有的微任务，直到清空所有的微任务，再执行宏任务，然后微任务，如果循环。

事件队列.jpg

demo代码来看宏任务和微任务的执行顺序

   eventLoopTest1() {
            console.log("script start");

            setTimeout(function() {
                console.log("setTimeout");
            }, 0);

            Promise.resolve()
                .then(function() {
                    console.log("promise1");
                })
                .then(function() {
                    console.log("promise2");
                });

            console.log("script end");
        },

1.png

 eventLoopTest2() {
            console.log("script start");

            setTimeout(function() {
                console.log("timeout1");
            }, 10);

            new Promise(resolve => {
                console.log("promise1");
                resolve();
                setTimeout(() => console.log("timeout2"), 10);
            }).then(function() {
                console.log("then1");
            });

            console.log("script end");
        },

Screen Shot 2020-06-01 at 3.43.26 PM.png

参考内容
[深入理解js事件循环机制]（[https://www.cnblogs.com/yugege/p/9598265.html](https://www.cnblogs.com/yugege/p/9598265.html) ）