javascript 事件循环

[RachelRen]

为了协调事件，用户交互，脚本，UI渲染，网络处理，所以就有了Event loops。Event Loop包含两类： 一类是基于Browsing Context,另一种是基于worker，两者是独立的。主要说的是Browsing Context。

任务队列

所有的任务可以分为同步和异步。同步任务一般会直接进入主线程中执行；异步任务（ajax，setTimeout）会通过任务队列（Event Queue）的机制来进行协调.

下图是主线程河任务队列之间的协调关系。

同步任务和异步任务分别进入不同的执行环境。主线程内的任务执行完毕为空，会去Event Queue读取对应的任务，推入主线程执行。这个过程的不断重复就是Event Loop(事件循环)。

在事件循环中，每进行一次循环操作称为tick.每一次tick的任务处理模型比较复杂，关键步骤可以总结如下：

1. 在此次tick中选择最先进入队列的任务（oldest task）,如果有则执行
2. 检查是否存在microtasks, 如果存在则不停执行，直至清空microtasks Queue
3. 更新render
4. 主线程重复执行上述步骤

宏任务和微任务

任务分为 宏任务和微任务

microtask主要包含：Promise、MutaionObserver、process.nextTick(Node.js 环境)

(macro)task主要包含：script(整体代码)、setTimeout、setInterval、I/O、UI交互事件、setImmediate(Node.js 环境)

一般来说，microtask优于macrotask执行，所以放入microtask队列会比macrotask更早执行。

在执行宏任务之前，都要先去检查有没有微任务。如果有，就先执行微任务，没有的话才去执行宏任务。

setTimeout

setTimeout(fn,0)

这个是什么意思？ 指定某个任务在主线程最早可得的空闲时间执行。意思是不用再等多少秒了，只要主线程执行栈内的同步任务全部完成，栈为空就马上执行。

还有就算主线程为空，0毫秒实际上也是达不到的。根据HTML的标准，最低是4毫秒。

setInterval

对于setInterval(fn,ms)来说，我们已经知道不是每过ms秒会执行一次fn，而是每过ms秒，会有fn进入Event Queue。一旦setInterval的回调函数fn执行时间超过了延迟时间ms，那么就完全看不出来有时间间隔了

总结

1. javascript 是一门单线程语言
2. Event Loop 是javascript的执行机制

另附两题：

new Promise(resolve => {
    resolve(1);
    Promise.resolve().then(() => console.log(2));
    console.log(4)
}).then(t => console.log(t));
console.log(3);

//4 3 2 1

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

//
script start
promise1
script end
then1
timeout1
timeout2

实践中要确保 onFulfilled 和 onRejected 方法异步执行，且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行

从一道题浅说 JavaScript 的事件循环

Tasks, microtasks, queues and schedules

这一次，彻底弄懂 JavaScript 执行机制