JavaScript运行机制深入浅出学习

一、JavaScript单线程模型

JavaScript是单线程的，JavaScript只在一个线程上运行，但是浏览器是多线程的，典型的浏览器有如下线程：

JavaScript引擎线程
GUI渲染线程
浏览器事件触发线程
浏览器Http请求线程

二、JavaScript为什么是单线程的

JavaScript之所以采用单线程而不是多线程，由于作为浏览器脚本语言，主要用途是与用户互动，以及操作DOM（文档对象模型）和BOM（浏览器对象模型），而多线程需要共享资源，多线程编程经࣡常面临锁、状态同步等问题。
假定JavaScript同时有两个线程，这两个线程同时操作同一个DOM增删修改操作，这时浏览器应该以哪个线程操作为准？无疑会带来同步问题。
既然JavaScript是单线程的，这就意味着，一次只能运行一个任务，其他任务都必须在后面排队等待为了利用多核CPU的计算能力，HTML5提出了Web Worker，它会在当前JavaScript的执行主线程中利用Worker类新开辟一个额外的线程来加载和运行特定的JavaScript文件，但在HTML5 Web Worker中是不能操作DOM的，任何需要操作DOM的任务都需要委托给JavaScript主线程来执行，所以虽然引入HTML5 Web Worker，但仍然没有改变JavaScript单线程的本质。

三、任务队列

Javascript有一个main thread 主进程和call-stack（一个调用堆栈），在对一个调用堆栈中的task处理的时候，其他的都要等着。当在执行过程中遇到一些类似于setTimeout等异步操作的时候，会交给浏览器的其他模块(以webkit为例，是webcore模块)进行处理，当到达setTimeout指定的延时执行的时间之后，task(回调函数)会放入到任务队列之中。一般不同的异步任务的回调函数会放入不同的任务队列之中。等到调用栈中所有task执行完毕之后，接着去执行任务队列之中的task(回调函数)。

1.异步和同步

一般而言，操作分为：发出调用和得到结果两步

同步

同步是指，发出调用，但无法立即得到结果，需要一直等待，直到返回结果。同步任务会进入主线程, 主线程后面任务必须要等当前任务执行完才能执行，从而导致主线程阻塞。

异步

异步是指，调用之后，不能直接拿到结果，通过event loop事件处理机制，在Event Queue注册回调函数最终拿到结果（拿到结果中间的时间可以介入其他任务）。

四、JavaScript如何工作的，首先要理解以下几个概念

JS Engine(JS引擎)
Runtime(运行上下文)
Call Stack(调用栈)
Event Loop(事件循环)
Callback(回调)

1.JS Engine

JavaScript引擎就是用来执行JS代码的, 通过编译器将代码编译成可执行的机器码让计算机去执行（Java中的JVM虚拟机一样）。

常见的JavaScript虚拟机（一般也把虚拟机称为引擎）：

Chakra(Microsoft Internet Explorer)
Nitro/JavaScript Core (Safari)
Carakan (Opera)
SpiderMonkey (Firefox)
V8 (Chrome, Chromium)

目前比较流行的就是V8引擎，Chrome浏览器和Node.js采用的引擎就是V8引擎。引擎主要由堆(Memory Heap)和栈(Call Stack)组成

Heap（堆） - JS引擎中给对象分配的内存空间是放在堆中的
Stack（栈）- 这里存储着JavaScript正在执行的任务。每个任务被称为帧（stack of frames）。

主线程运行的时候，产生堆（heap）和栈（stack）,栈中的代码调用个各种外部api。

2.RunTime (运行环境)

JS在浏览器环境中运行时，BOM和DOM对象提供了很多相关外部接口（这些接口不是V8引擎提供的），供JS运行时调用，以及JS的事件循环(Event Loop)和事件队列(Callback Queue)，把这些称为RunTime。在Node.js中，可以把Node的各种库提供的API称为RunTime

3.Call Stack

当JavaScript代码执行的时候，创建执行环境是很重要的，它可能是下面三种情况中的一种：

全局 code（Global code）——代码第一次执行的默认环境
函数 code（Function code）——执行流进入函数体
Eval code（Eval code）——代码在eval函数内部执行

JavaScript代码首次被载入时，会创建一个全局上下文，当调用一个函数时，会创建一个函数执行上下文。

在计算机系统中栈是一种遵从先进后出（FILO）原则的区域。函数被调用时，创建一个新的执行环境，就会被加入到执行栈顶部，浏览器始终执行当前在栈顶部的执行环境。一旦函数完成了当前的执行环境，它就会被弹出栈的顶部, 把控制权返回给当前执行环境的下个执行环境。

案例：浏览器第一次加载你的script，它默认的进了全局执行环境，然后main执行创建一个新的执行环境，把它添加到已经存在的执行栈的顶部，在里面执行Student构造函数，执行流进入内部函数将生成执行环境添加到当前栈顶，在Student构造函数里，又调用sayHi方法，再次把sayHi生成执行环境压入到栈顶。当函数执行完一次弹出栈顶。

class Student {
	constructor(age, name) {
		this.name = name;
        this.age = age;
		this.sayName(); // stack 3
	}
	sayName() {
		console.log(`my name is ${this.name}, this year age is ${this.age}`);
	}
}

function main(age, name) {
	new Student(age, name); // stack 2
}

main(23, 'John'); // stack 1

程序运行时，首先main()函数的执行上下文入栈，再调用Student构造函数添加到当前栈尾，在Student里再调用sayName()方法，添加到此时栈尾。最终main方法所在的位置叫栈底，sayName方法所在的位置是栈顶，层层调用，直至整个调用栈完成返回结果，最后再由栈顶依次出栈。

4.Event Loop & Callback

Event Loop 类似于一个while(true)的循环，每执行一次循环体的过程我们成为Tick。每个Tick的过程就是查看是否有事件待处理，当Call Stack里面的调用栈运行完变成空了，就取出事件及其相关的回调函数。放到调用栈中并执行它。

调用栈中遇到DOM操作、ajax请求以及setTimeout等WebAPIs的时候就会交给浏览器内核的其他模块进行处理，webkit内核在Javasctipt执行引擎之外，有一个重要的模块是webcore模块。对于图中WebAPIs提到的三种API，webcore分别提供了DOM Binding、network、timer模块来处理底层实现。等到这些模块处理完这些操作的时候将回调函数放入任务队列中，之后等栈中的task执行完之后再去执行任务队列之中的回调函数。

Javascript有一个main thread 主进程和call-stack（一个调用堆栈），在对一个调用堆栈中的task处理的时候，其他的都要等着。当在执行过程中遇到一些类似于setTimeout等异步操作的时候，会交给浏览器的其他模块(以webkit为例，是webcore模块)进行处理，当到达setTimeout指定的延时执行的时间之后，task(回调函数)会放入到任务队列之中。一般不同的异步任务的回调函数会放入不同的任务队列之中。等到调用栈中所有task执行完毕之后，接着去执行任务队列之中的task(回调函数)。

代码案例：
console.log('Hi');
setTimeout(function cb1() {
    console.log('cb1');
}, 5000);

console.log('Bye');

以上代码从上到下首先执行log('Hi') 它是一个普通方法立即被执行，当遇到定时器的时候，执行引擎将其添加到调用栈，调用栈发现setTimeout是WebAPIs中的API，将其出栈交给浏览器的timer模块进行处理，此时timer模块去处理延迟执行的函数，此时执行log('Bye'),输出'Bye'，当timer模块中延时方法规定的时间到了之后就将其放入到任务队列之中，此时调用栈中的task已经全部执行完毕。

调用栈中的task执行完毕之后，执行引擎会接着看执行任务队列中是否有需要执行的回调函数。

五、Event Loop处理机制

1.什么是Event Loop？

Event Loop（事件循环）是实现异步的一种机制，允许 Node.js 执行非阻塞 I/O 操作 .

大多数现代的系统内核都是多线程的, 他们在后台可以处理多个同时执行的操作. 当其中一个操作完成时, 系统内核会通知Node.js, 然后与之相关的回调函数会被加入到 poll队列并且最终被执行.

注意: 在Windows和Unix/Linux实现之间存在一点小小的差异, 但对本示例来说这并不重要. 最重要的部分都已列在这里了. 实际上有7或8个阶段, 但我们关心的和Node.js实际会用到的阶段都已经列在了上面.

每个阶段都有一个先进先出（FIFO）的队列，里面存放着要执行的回调函数，然而每个阶段都有其特殊之处，当事件循环进入了某个阶段后，它可以执行该阶段特有的任意操作，然后进行该阶段的任务队列中的回调函数，一直到队列为空或已执行回调的数量达到了允许的最大值，当队列为空或已执行回调的数量达到了允许的最大值时，事件循环会进入下一个阶段,阶段之间会互相转换，循环顺序并不是完全固定的，因为很多阶段是由外部的事件触发的。

2.阶段概览

timers(定时器)：此阶段执行由setTimeout()和setInterval() 调度的回调函数
I/O callbacks(I/O回调): 此阶段会执行几乎所有的回调函数，处理close callbacks 和那些由times与setImmediate()调度的回调
idle(空闲)，prepare(预备): 此阶段只在内部调用
poll(轮询): 检索新的I/O事件，在恰当的时候会阻塞在这个阶段
check(检查): setImmediate() 设置的回调会在此阶段被调用
close callbacks(关闭事件的回调): 诸如 socket.on('close', ...) 此类的回调在此阶段被调用

在事件循环的每次运行之间，Node.js会检查它是否在等待异步I/O或定时器, 如果没有的话就会自动关闭.

一次事件循环就是处理以上几个phase的过程，此外还有两个比较特殊的队列Next Ticks Queue和Other Microtasks Queue，那另外两个特殊的队列是在什么时候运行的呢？
答案: 就是在每个 phase运行完后马上就检查这两个队列有无数据，有的话就马上执行这两个队列中的数据直至队列为空。当这两个队列都为空时，event loop 就会接着执行下一个phase。这两个队列相比，Next Ticks Queue的权限要比Other Microtasks Queue的权限要高，因此Next Ticks Queue会先执行。

两个比较特殊的队列：

Next Ticks Queue: 保存process.nextTick中的回调函数
Other Microtasks Queue: 保存promise等microtask中的回调函数。

3.阶段详情

由于这些操作中的任意一个都可以调度更多的操作, 在 poll(轮询) 阶段处理的新事件被系统内核加入队列, 当轮询事件正在被处理时新的轮询事件也可以被加入队列. 因此, 长时间运行的回调函数可以让 poll 阶段运行的时间比 timer(计时器) 的阈值长得多。看下面timer 和 poll 部分了解更多细节

timers

给一个定时器（setTimeout/setInterval）指定时间阈值时，给定的回调函数有时并不是在精确的时间阈值点执行，定时器的阈值只是说至少在这个时间阈值点执行，然而操作系统调度或其他回调的执行可能会延迟定时器回调的执行。

注意：从技术来讲， poll阶段会控制定时器何时被执行

const fs = require('fs');

// 设定一个100ms执行的定时器
const startTime = Date.now();
setTimeout(() => {
	console.log('timeout延迟执行时间', Date.now() - startTime);
	console.log('timer');
}, 100);

// 异步读取文件 假设95ms完成读取任务
fs.readFile('./1.txt', (err, data) => { // 回调函数中又耗费100毫秒
	const startTime = Date.now();
	while (Date.now() - startTime < 200) {
		// console.log(Date.now() - startTime);
	}
});

开始事件循环定时器被加入到timer中延迟执行，当事件循环进入poll阶段，它有一个队列执行I/O操作（fs.readFile()）还未完成，poll阶段将会阻塞，大约95ms 完成了I/O操作（文件读取），将要耗时10ms才能完成的回调加入poll队列并执行，当回调执行完成，poll Queue为空，此时poll会去timer阶段查看最近有没有到期的定时器，发现存在一个已经超时将近195ms的定时器，并执行定时器回调。在这个例子中如果不假设读取时间，定时器执行的时间间隔大约为200ms。

注意: 为了防止 poll 阶段阻塞事件循环, libuv(一个实现了Node.js事件循环和Node.js平台所有异步行为的C语言库), 有一个严格的最大限制(这个值取决于操作系统), 在超过此限制后就会停止轮询.

I/O callbacks

此阶段执行一些系统操作处理 I/O 异常错误；,如TCP的errors回调函数。

poll

poll 阶段主要有两个功能:

1.执行时间阈值已过去的定时器回调

2.处理poll队列中的事件

当事件循环进入poll阶段并且当前没有定时器时，以下两种情况其中一种会发生：

如果poll队列不是空的，事件循环会遍历队列并同步执行里面的回调函数，直到队列为空或者到达操作系统的限制（操作系统规定的连续调用回调函数的数量的最大值）
如果poll队列是空的，则以下两种情况其中一种将发生：
- 如果存在被 setImmediate() 调度的回调，事件循环会结束poll阶段并进入check阶段执行那些被 setImmediate() 调度了的回调。
- 如果没有任何被 setImmediate() 调度的回调，事件循环会等待回调函数被加入队列，一旦回调函数加入了队列，就立即执行它们。

一旦poll队列变为空，事件循环就检查是否已经存在超时的定时器，如果存在，事件循环将绕回到timers阶段执行这些定时器回调。

check

此阶段如果poll阶段变为空转（idle）状态，如果存在被 setImmediate() 调度的回调，事件循环不会在poll阶段阻塞等待相应的I/O事件，而直接去check阶段执行 setImmediate() 函数。

close callbacks

如果一个socket或句柄被突然关闭(例如 socket.destroy()), 'close'事件会在此阶段被触发. 否则 'close'事件会通过 process.nextTick() 被触发.

setImmediate() vs setTimeout()

setImmediate() 被设计为: 一旦当前的poll阶段完成就执行回调
setTimeout() 调度一个回调在时间阀值之后被执行

这两种定时器的执行顺序可能会变化, 这取决于他们是在哪个上下文中被调用的. 如果两种定时器都是从主模块内被调用的, 那么回调执行的时机就受进程性能的约束(进程也会受到系统中正在运行的其他应用程序的影响).

setTimeout(function timeout() {
  console.log('timeout');
}, 0);

setImmediate(function immediate() {
  console.log('immediate');
});

但如果把setImmediate和setTimeout放到了I/O周期中，此时他们的执行顺序永远都是immediate在前，timeout在后

const fs = require('fs');
fs.readFile(__filename, () => {
  setTimeout(() => {
    console.log('timeout');
  }, 0);
  setImmediate(() => {
    console.log('immediate');
  });
});

相比于 setTimeout(), 使用 setImmediate() 的主要优点在于: 只要时在I/O周期内, 不管已经存在多少个定时器, setImmediate()设置的回调总是在定时器回调之前执行

process.nextTick()

在上面我们提到了Next Ticks Queue特殊的队列，在这个队列里主要存放process.nextTick这个异步函数。从技术上讲该阶段并不属于事件循环的一部分，不管当前事件循环处于哪个阶段，只要当前阶段操作完毕后进入下个阶段前瞬间执行process.nextTick()

这样一来任何时候在给定阶段调用process.nextTick()时，所有传入process.nextTick()的回调都会在事件循环继续之前被执行。由于允许开发者通过递归调用 process.nextTick() 来阻塞I/O操作, 这也使事件循环无法到达 poll 阶段.

利用process.nextTick函数，我们可以对内部函数作异步处理可能出现的异常，porcess.nextTick(callback, ...args) 允许接收多个参数，callback后面的参数会作为callback的实参传递进来，这样就无需嵌套函数了。

function apiCall(arg, callback) {
	if (typeof arg !== 'string')
		return process.nextTick(callback,
			new TypeError('argument should be string'));
	callback.call(this, arg);
};
apiCall(1, (err) => {
	console.log(err);
});

apiCall('node', (err) => {
	console.log(err);
});

setTimeout() setImmediate() process.nextTick()

setTimeout() 在某个时间值过后尽快执行回调函数；
process.nextTick() 在当前调用栈结束后就立即处理，这时也必然是“事件循环继续进行之前”
setImmediate() 函数是在poll阶段完成后进去check阶段时执行

优先级顺序从高到低： process.nextTick() > setImmediate() > setTimeout()
注：这里只是多数情况下，即轮询阶段（I/O 回调中）。比如之前比较 setImmediate() 和 setTimeout() 的时候就区分了所处阶段/上下文。

Macrotask Queue和Microtask Queue

macrotask 和 microtask 这两个概念, 表示异步任务的两种分类。在挂起任务时，JS 引擎会将所有任务按照类别分到这两个队列中，首先在 macrotask 的队列（这个队列也被叫做 task queue）中取出第一个任务，执行完毕后取出 microtask 队列中的所有任务顺序执行；之后再取 macrotask 任务，周而复始，直至两个队列的任务都取完。

macrotask(宏任务、大任务):

script（整体代码）
setTimeout
setInterval
setImmediate
I/O
UI rendering

microtask(微任务、小任务):

promise
Object.observe
process.nextTick
MutationObserver

每个事件循环只处理一个macrotask(大任务) ，但会处理完所有microtask(小任务)。

参考资料

JS运行机制
Node.JS事件循环
Javascript事件循环机制
事件循环

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

2.JavaScript运行机制详解.md

2.JavaScript运行机制详解.md

JavaScript运行机制深入浅出学习

一、JavaScript单线程模型

二、JavaScript为什么是单线程的

三、任务队列

1.异步和同步

同步

异步

四、JavaScript如何工作的，首先要理解以下几个概念

1.JS Engine

2.RunTime (运行环境)

3.Call Stack

4.Event Loop & Callback

五、Event Loop处理机制

1.什么是Event Loop？

2.阶段概览

3.阶段详情

timers

I/O callbacks

poll

当事件循环进入poll阶段并且当前没有定时器时，以下两种情况其中一种会发生：

check

close callbacks

setImmediate() vs setTimeout()

process.nextTick()

setTimeout() setImmediate() process.nextTick()

Macrotask Queue和Microtask Queue

参考资料

Files

2.JavaScript运行机制详解.md

Latest commit

History

2.JavaScript运行机制详解.md

File metadata and controls

JavaScript运行机制深入浅出学习

一、JavaScript单线程模型

二、JavaScript为什么是单线程的

三、任务队列

1.异步和同步

同步

异步

四、JavaScript如何工作的，首先要理解以下几个概念

1.JS Engine

2.RunTime (运行环境)

3.Call Stack

4.Event Loop & Callback

五、Event Loop处理机制

1.什么是Event Loop？

2.阶段概览

3.阶段详情

timers

I/O callbacks

poll

当事件循环进入poll阶段并且 当前没有定时器时，以下两种情况其中一种会发生：

check

close callbacks

setImmediate() vs setTimeout()

process.nextTick()

setTimeout() setImmediate() process.nextTick()

Macrotask Queue和Microtask Queue

参考资料

当事件循环进入poll阶段并且当前没有定时器时，以下两种情况其中一种会发生：