事件循环系统

js是单线程语言

事件循环是为了处理异步任务，它是js的执行机制。

js线程将任务分成同步与异步任务，它们的执行机制如下：

同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数
当指定的事情完成时，Event Table会将这个函数移入Event Queue。
主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
上述过程会不断重复，也就是常说的Event Loop(事件循环)。

宏任务与微任务

宏任务与微任务都是异步任务，他们之间的区别就是当要执行下一个宏任务之前，会将在执行任务过程中产生的微任务全部执行完毕后再执行下一个宏任务。

常见的宏任务：

定时器
xhr请求
各种事件

常见的微任务

Promise.resolve
Promise.reject
MutationObserver

举例

例子1

// 宏任务
setTimeout(() => {
    console.log(1)
}, 0);
// 微任务
Promise.resolve().then(()=>{
    console.log(2)
})
// 同步任务
console.log(3)
// 3 2 1

例子2

// 宏任务
setTimeout(() => {
    console.log(1)
}, 0);
// 微任务
Promise.resolve().then(()=>{
    console.log(2)
})
async function task(){
    console.log(3)
    // 同步任务
    await new Promise((res,rej)=>{
        console.log(4)
        // 异步任务
        setTimeout(() => {
            res()
        }, 0);
    })
    // 因为await的影响 滞后了
    console.log(5)
}
// 同步任务
task()
// 同步任务
console.log(6)
// 3 4 6 2 1 5

浏览器/4、页面事件循环系统

事件循环系统

宏任务与微任务

举例

例子1

例子2