Js运行机制

发表于 | 分类于

Js运行机制

写了这么多年的js了，js运行机制是什么？
可能在我们脑海里会出现，单线程运行机制、任务队列、事件循环、定时器、Promise与process.nextTick(callback)

JavaScript的一个语言特性（也是这门语言的核心）就是单线程。什么是单线程呢？简单地说就是同一时间只能做一件事，当有多个任务时，只能按照一个顺序一个完成了再执行下一个

为什么JS是单线程的呢？

JS最初被设计用在浏览器中，作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM
如果浏览器中的JS是多线程的，会带来很复杂的同步问题
比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
所以为了避免复杂性，JavaScript从诞生起就是单线程
为了提高CPU的利用率，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以这个标准并没有改变JavaScript单线程的本质

同步和异步
同步和异步关注的是消息通知机制

同步：发出调用后，没有得到结果之前，该调用不返回，一旦调用返回，就得到返回值了。 简而言之就是调用者主动等待这个调用的结果
异步：调用者在发出调用后这个调用就直接返回了，所以没有返回结果。换句话说当一个异步过程调用发出后，调用者不会立刻得到结果，而是调用发出后，被调用者通过状态、通知或回调函数处理这个调用。
阻塞和非阻塞
阻塞和非阻塞关注的是程序在等待调用结果（消息，返回值）时的状态

阻塞调用是指调用结果返回之前，当前线程会被挂起。调用线程只有在得到结果之后才会返回
非阻塞调用指在不能立刻得到结果之前，该调用不会阻塞当前线程
单线程意味着同一时间只能进行一件事情,前面的事情结束才能执行后面的事件.当碰到需要时间的IO事件的时候问题就来了,必须等到这些结束后才往下进行,但这时CPU是闲着的.这样浪费了很多计算机的性能.

JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去.

于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入”任务队列”（task queue）的任务，只有”任务队列”通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）
（2）主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件
（3）一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行
（4）主线程不断重复上面的第三步

除了广义的同步任务和异步任务，我们对任务有更精细的定义：

macro-task(宏任务)：包括整体代码script，setTimeout，setInterval
micro-task(微任务)：Promise，process.nextTick

1
2
3
4
5
console.log(1);
setTimeout(function(){
 console.log(2);
}, 0);
console.log(3);

运行结果： 1 3 2

1
2
3
4
5
6
for(let i=0, i < 2, i++){
 console.log(i);
 setTimeout(function(){
  console.log(i);
 },1000);
}

运行结果：0 1 2 2

Js是单线程的，即同一时间只能做一件事件
以上setTimeout异步任务要先挂起

补一个有可能手误导致的立即执行

1
2
3
setTimeout(“console.log(1)”,1000);
setTimeout(console.log(1),1000); //立即执行
setTimeout(function(){console.log(1)},1000);

来分析一段较复杂的代码 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
console.log('main1');
setTimeout(function () {
    console.log('setTimeout');
    process.nextTick(function () {
        console.log('process.nextTick2');
    });
}, 0);
new Promise(function (resolve, reject) {
    console.log('promise');
    resolve();
}).then(function () {
    console.log('promise then');
});
process.nextTick(function () {
    console.log('process.nextTick1');
});
console.log('main2');

以上代码的执行结果是：main1=>promise=>main2=>process.nextTick1=>promise then=>setTimeout=>process.nextTick2

系统启动执行脚本，这个脚本就是一个宏任务，执行代码块中所有的同步代码，输出main1
next1放入微任务，setTimeout+nextTick2(下一轮)放入宏任务队列
promise构造函数部分是同步的，立刻执行输出promise，promise then放入微任务
下面同步代码输出main2
接下来执行微任务输出nextTick1，promise then
接下来执行宏任务输出setTimeout，将nexttick2放入微任务队列
接下来执行微任务nexttick2
nextTick是由node自己定义并实现的概念，它的回调调用入口在event loop过程中MakeCallback函数的末尾，驱动调用清空js层的queue，最后再执行microtasks，适当处理下可能触发的promise，明显 process.nextTick1> promise.then