事件循环(轮训)

一、学习目标

1、什么是事件轮训(轮训)

2、事件队列是V8引擎创建的还是浏览器创建的

3、不同的事件任务是否有执行优先级？优先级是如何划分的？

4、为什么事件队列需要两个而不是一个？

5、宏任务有哪些，微任务有哪些，举例？

6、requestAnimationFrame是宏任务还是微任务或者 两者都不是？

7、异步任务如何保持执行上下文？

二、EventLoop

1、什么是事件循环(轮训)

JavaScript是一种单线程的编程语言，意思就是同一时间段只能做一件事，所有任务都需要排队依次完成

Event Loop即事件循环(轮训)，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。

详细介绍：

1. 宏任务是一个个执行。
2. 如果执行过程中，遇到微任务，就把他加入微任务队列。
3. 当前宏任务执行完后，会判断微任务队列中是否有任务。
4. 有就把该微任务放到调用栈（执行栈）中让主线程执行；没有就继续执行下一个宏任务，不断循环。

图解如下：

队列性质：谁先定义谁先进入队列（即为先进先出）。

宏任务：调用的时候，从宏任务队列中按照先后顺序进入调用栈中执行。

微任务：只要定义了就会被浏览器按照先后顺序添加到微任务队列中。

宏任务和微任务从队列中进入调用栈的过程：

• 执行完当前宏任务后，会判断微任务队列中是否有对应的微任务（多个微任务就按照顺序执行），通过事件轮训机制按照顺序添加到调用栈中调用。
• 宏任务产生的宏任务或微任务，其优先级是微任务高于宏任务

宏任务和微任务都不属于js引擎，属于浏览器引擎。

宏任务包括：Timer，IO，DOM Event，channelMessage，requestAnimationFrame等。

2、浏览器刷新周期与事件轮训

每一帧保持在16.6ms，就不会出现卡顿的现象。

先执行宏任务，在执行对应的微任务（在时间充足的情况，宏任务和微任务可以有无数个），接下来再是requestAnimationFrame，再是UI rendering，最后是requestIdleCallback。

存在的现象：宏任务，微任务过多时，那么就有可能requestAnimationFrame，UI rendering，requestIdleCallback一个或多个没有时间执行，那么这一帧就不执行了，就到下一帧对应的位置再执行。

三、例子

1、microtasks 和 macrotask 的执行顺序

浏览器 运行以下代码，看下结果：

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');

执行结果如下：

script start
script end
promise1
promise2
setTimeout

上述代码虽然 setTimeout 延时为0，其实还是异步的。因为H5标准规定 setTimeout 函数的第二个参数不能小于4毫秒，不足会自动增加。

setTimeout 和 promise 都是异步事件，但是微任务（microtasks）的优先级要高于宏任务（macrotask）。

首先我们需要明白以下几件事情：

• JS 分为同步任务和异步任务
• 同步任务都在主线程上执行，形成一个执行栈
• 主线程之外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。
• 一旦执行栈中的所有同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

根据规范，事件循环是通过任务队列的机制来进行协调的。一个 Event Loop 中，可以有一个或者多个任务队列(task queue)，一个任务队列便是一系列有序任务(task)的集合；每个任务都有一个任务源(task source)，源自同一个任务源的 task 必须放到同一个任务队列，从不同源来的则被添加到不同队列。setTimeout/Promise 等 API 便是任务源，而进入任务队列的是他们指定的具体执行任务。

console.log('1')

setTimeout(function (){
	console.log('2')
}, 1000)

console.log('3')

上面的代码执行动图大致如下:

console.log('1')

setTimeout(function callback(){
	console.log('2')
}, 1000)

new Promise((resolve, reject) => {
    console.log('3')
    resolve()
})
.then(res => {
    console.log('4');
})

console.log('5')

上面的代码执行动图大致如下: