Event Loop指的是计算机系统的一种运行机制。JavaScript采用此机制解决单线程引发相关问题
在浏览器中的web应用会涉及到.JavaScript引擎、WebAPI、Event Loop、Task Queue (Macro Task, Micro Task).因此如果想弄清Event Queue.我们必须都以上都有所了解.
JavaScript引擎:
目前市面上解析JavaScript文件效率最高的就是Google的V8引擎.它主要由两个部分组成:
- 内存堆: 负责内存分配发生的地方.
- 调用堆栈: 代码执行时堆栈帧的位置.(是一种数据结构,记录了程序的基本位置.先进后出)
function multiply(x, y) {
return x * y;
}
function printSquare(x) {
var s = multiply(x, x);
console.log(s);
}
printSquare(5);
当引擎开始执行此代码时，调用堆栈将为空。之后，步骤如下
并发和事件循环
JavaScript是一门单线程语言.因此只有一个单一的调用堆栈,并且一次只能做一件事,当我们进行一些复杂的耗时操作(图形转换)时.浏览器就无法进行其他事情,无法渲染任何内容.也不能运行其它代码.
为了解决浏览器被阻塞的问题,JavaScript提供了一种解决方案异步回调函数（asynchronous callback functions）.异步函数在解析过程中不会被立即执行,会被浏览器放入Task Queue
Task Queue 分为 Macrotask, Microtask
Event Loop 每执行一次 先从Macrotask队列中拉出一个.然后检查microtask队列是否为空.依次执行直至清空队列.
Macrotask主要包含：setTimeout、setInterval、setImmediate、I/O、UI交互事件
microtask主要包含：Promise、process.nextTick、MutaionObserver
process.nextTick 永远大于 promise.then.
Node中，_tickCallback在每一次执行完TaskQueue中的一个任务后被调用，而这个_tickCallback中实质上干了两件事：
- nextTickQueue中所有任务执行掉(长度最大1e4，Node版本v6.9.1)
- 第一步执行完后执行_runMicrotasks函数，执行microtask中的部分(promise.then注册的回调)
自测
console.log('1');
process.nextTick(function() {
console.log('4');
});
setTimeout(function() {
console.log('6');
process.nextTick(function() {
console.log('7');
});
}, 0);
new Promise(function(resolve, reject) {
console.log('2');
resolve();
}).then(function() {
console.log('5');
});
console.log('3');setImmediate和setTimeout的延迟设为0，或1的时候，他们的执行顺序是随机的。
setTimeout(() => {
console.log(2)
}, 2)
setTimeout(() => {
console.log(1)
}, 1)
setTimeout(() => {
console.log(0)
}, 0)
// 谷歌浏览器环境中的执行顺序是1 0 2。
// Node环境中的执行顺序是随机的What is the JavaScript event loop?
How JavaScript works: an overview of the engine, the runtime, and the call stack