初识JavaScript EventLoop

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 EventLoop

并发和事件循环

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注册的回调)

初识JavaScript EventLoop

自测

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

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

Event Loop的规范和实现

初识JavaScript EventLoop

JavaScript引擎:

并发和事件循环

Task Queue 分为 Macrotask, Microtask

自测

相关推荐