JS的运行机制（浏览器和node）

一、为什么JS语言是单线程

js的单线程和他的用途有关。作为浏览器脚本语言，js的主要用途就是与用户互动，以及操作DOM、BOM。这决定了它只能是单线程，否则会有很复杂的同步问题。例如：js同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程在删除这个节点，此时浏览器应该以哪个线程为准？
因此，为了避免复杂性，从诞生以来，JS就是单线程，这是这么语言的核心特征。
为了利用多核cpu的计算能力，HTML5提出Web Worker标准，允许js脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM，所有新标准并没有改变js单线程的本质。

二、任务队列

单线程就意味着，任务得一个一个的执行，前一个任务结束，后一个任务才能执行。但是当前一个任务的耗时很长，就会阻塞后面的任务的执行。如果能先执行后面的短任务，在执行有了结果的长任务，于是就有了同步任务和异步任务。同步任务是指，在主线程上的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务是指，不进入主线程，而是在任务队列中的任务，当异步任务有了结果，就会在队列中添加一个事件。当主线程的同步任务都执行完成后，再去异步的任务队列中按照从前往后的顺序，执行异步任务添加的事件，也就是执行回调函数。如此反复，便形成一个事件循环。
js运行机制：

（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。

（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

（4）主线程不断重复上面的第三步。

下图就是主线程和任务队列的示意图。

只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。
补充：异步任务分为task（宏任务，也可称为macroTask）和microtask（微任务）两类。

1、一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。
2、任务队列又分为macro-task（宏任务）与micro-task（微任务），在最新标准中，它们被分别称为task与jobs。
3、macro-task大概包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
4、micro-task大概包括: process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)
5、setTimeout/Promise等我们称之为任务源。而进入任务队列的是他们指定的具体执行任务。setTimeout, setInterval是同一个任务源，因此他们的回调位于同一个任务队列中，setImmediate、I/O等均为不同的任务源，他们的回调也会放到任务队列中，但不是同一个任务队列。

js执行优先级：
1、同步代码(按照代码顺序执行，promise构造函数立即执行，属于同步代码)，
任务队列：
2、所有的微任务（优先级process.nextTick > promise.then）
3、其中的一个任务队列（根据系统性能的不同，可能会导致任务队列的优先顺序不一样，姑且与Node的事件循环一致）
4、所有的微任务
5、其中的一个任务队列
6、所有的微任务
7、其中的一个任务队列（外层任务可能已经执行完了，到了内部嵌套的其他异步任务）
....等

一个例子：

console.log('start')

setTimeout(() => {console.log('setTimeout1');
},0); 
const myInterval = setInterval(() => {    console.log('setInterval');
},0)

setTimeout(() => {    console.log('setTimeout2');    Promise.resolve().then(() => {        console.log('promise3');
    })

    setTimeout(() => {        console.log('setTimeout3');
        clearInterval(myInterval);
    },0)
},0)Promise.resolve()
        .then(() => {            console.log('promise1');
        }).then(() => {            console.log('promise2');
        })console.log('end');

这段代码最后的输出结果如下：

startendpromise1
promise2
setTimeout1
setInterval
setTimeout2
promise3
setInterval
setTimeout3

两个例子：

console.log('golb1');

setImmediate(function () {    console.log('immediate1');
    process.nextTick(function () {        console.log('immediate1_nextTick');
    })    new Promise(function (resolve) {        console.log('immediate1_promise'); resolve();
    }).then(function () { console.log('immediate1_then') })
    setImmediate(()=>{        console.log('immediate2-child')
    })
})
setTimeout(function () {    console.log('timeout1');
    process.nextTick(function () {        console.log('timeout1_nextTick');
    })    new Promise(function (resolve) {        console.log('timeout1_promise'); resolve();
    }).then(function () {        console.log('timeout1_then')
    })
    setTimeout(()=>{        console.log('timeout1-child')
    })
})new Promise(function (resolve) {    console.log('glob1_promise'); resolve();
}).then(function () {    console.log('glob1_then')
})
process.nextTick(function () {    console.log('glob1_nextTick');
})

setImmediate(function () {    console.log('immediate2');
    process.nextTick(function () {        console.log('immediate2_nextTick');
    })    new Promise(function (resolve) {        console.log('immediate2_promise'); resolve();
    }).then(function () { console.log('immediate2_then') })
    setImmediate(()=>{        console.log('immediate2-child')
    })
})new Promise(function (resolve) {    console.log('glob2_promise'); resolve();
}).then(function () {    console.log('glob2_then')

})
process.nextTick(function () {    console.log('glob2_nextTick');
})


setTimeout(function () {    console.log('timeout2');
    process.nextTick(function () {        console.log('timeout2_nextTick');
    })    new Promise(function (resolve) {        console.log('timeout2_promise');
        resolve();
    }).then(function () {        console.log('timeout2_then')
    })
    setTimeout(()=>{        console.log('timeout2-child')
    })
})

golb1
glob1_promise
glob2_promise
glob1_nextTick
glob2_nextTick
glob1_then
glob2_then
timeout1
timeout1_promise
timeout2
timeout2_promise
timeout1_nextTick
timeout2_nextTick
timeout1_then
timeout2_then
immediate1
immediate1_promise
immediate2
immediate2_promise
immediate1_nextTick
immediate2_nextTick
immediate1_then
immediate2_then
timeout1-child
timeout2-child
immediate2-child
immediate2-child

三、事件和回调函数

"任务队列"是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列"，就是读取里面有哪些事件。

"任务队列"中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。

所谓"回调函数"（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

"任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，"任务队列"上第一位的事件就自动进入主线程

四、事件循环（Event Loop）

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

上图中，主线程运行的时候，产生堆和栈，栈中的代码调用各种外部API，它们在任务队列中加入各种事件（click，load，done）。只要栈中的代码执行完毕，主线程就会去读取"任务队列"，依次执行那些事件所对应的回调函数。
执行栈中的代码（同步任务），总是在读取"任务队列"（异步任务）之前执行。

五、定时器

除了放置异步任务的事件，"任务队列"还可以放置定时事件，即指定某些代码在多少时间之后执行。这叫做"定时器"（timer）功能，也就是定时执行的代码。

定时器功能主要由setTimeout()和setInterval()这两个函数来完成，它们的内部运行机制完全一样，区别在于前者指定的代码是一次性执行，后者则为反复执行。以下主要讨论setTimeout()。

setTimeout()接受两个参数，第一个是回调函数，第二个是推迟执行的毫秒数。

console.log(1);
setTimeout(function(){console.log(2);},1000);console.log(3);

上面代码的执行结果是1，3，2，因为setTimeout()将第二行推迟到1000毫秒之后执行。

如果将setTimeout()的第二个参数设为0，就表示当前代码执行完（执行栈清空）以后，立即执行（0毫秒间隔）指定的回调函数。

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

上面代码的执行结果总是2，1，因为只有在执行完第二行以后，系统才会去执行"任务队列"中的回调函数。

总之，setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，也就是说，尽可能早得执行。它在"任务队列"的尾部添加一个事件，因此要等到同步任务和"任务队列"现有的事件都处理完，才会得到执行。

HTML5标准规定了setTimeout()的第二个参数的最小值（最短间隔），不得低于4毫秒，如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。另外，对于那些DOM的变动（尤其是涉及页面重新渲染的部分），通常不会立即执行，而是每16毫秒执行一次。这时使用requestAnimationFrame()的效果要好于setTimeout()。

需要注意的是，setTimeout()只是将事件插入了"任务队列"，必须等到当前代码（执行栈）执行完，主线程才会去执行它指定的回调函数。要是当前代码耗时很长，有可能要等很久，所以并没有办法保证，回调函数一定会在setTimeout()指定的时间执行。

六、Node.js的Event Loop

Node.js也是单线程的Event Loop，但是它的运行机制不同于浏览器环境。
根据node官方文档的描述，node中的Event Loop主要有如下几个阶段

各个阶段执行的任务如下：

• timers 阶段: 这个阶段执行setTimeout和setInterval预定的callback;

• I/O callbacks 阶段: 执行除了 close事件的callbacks、被timers设定的callbacks、setImmediate()设定的callbacks这些之外的callbacks;

• idle, prepare 阶段: 仅node内部使用;

• poll 阶段: 获取新的I/O事件, 适当的条件下node将阻塞在这里;

• check 阶段: 执行setImmediate() 设定的callbacks;

• close callbacks 阶段: 执行socket.on('close', ...)这些 callback

process.nextTick()

process.nextTick()不属于上面的任何一个phase，它在每个phase结束的时候都会运行。也可以认为，nextTick在下一个异步方法的事件回调函数调用前执行。

setTimeout(fn,0) Vs setImmediate Vs process.nextTick()

setTimeout(fn,0) Vs setImmediate

• setTimeout(fn,0)在timer阶段执行，并且是在poll阶段进行判断是否达到指定的time时间，若到了，就返回timer阶段执行。

• setImmediate在check阶段才会执行
  有时候发现setImmediate先于setTimeout执行，此时要分析清楚，setTimeout可能进入了下一次的事件循环。上述的2个规则，是建立在同一个事件循环中讨论的。
  例子

const fs = require('fs');function someAsyncOperation(callback) {  // Assume this takes 95ms to complete
  fs.readFile('../m.txt', callback);
  fs.readFile('../m.txt', callback);
}const timeoutScheduled = Date.now();

setTimeout(() => {  const delay = Date.now() - timeoutScheduled;  console.log(`${delay}ms have passed since I was scheduled`);
}, 100);// do someAsyncOperation which takes 95 ms to completesomeAsyncOperation(() => {  const startCallback = Date.now();  // do something that will take 10ms...
  while (Date.now() - startCallback < 200) {    // do nothing
  }  console.log('文件回调函数完成')
});
setImmediate(() => {    console.log('immediate');
  });//输出immediate
文件回调函数完成215ms have passed since I was scheduled
文件回调函数完成

上栗代码，第一次事件循环，timer阶段定时未到、poll阶段读文件未完成然后进入check阶段；第二次事件循环，timer阶段没有定时未到，poll阶段，io回调队列不空，执行回调，此时定时终于到了，返回到timer阶段执行定时器的回调函数，执行完成又进入poll阶段
*个人总结：setTimeout（fn，t）的回调函数不在check阶段执行，即便是定时时间已到。它在timer回调
setTimeout(fn,0) && setImmediate两者的执行顺序要根据当前的执行环境才能确定，根据官方文档总结得出的结论是：

• 如果两者都在主模块（main module）调用，那么执行先后取决于进程性能，即随机。

• 如果两者都不在主模块调用（即在一个 IO circle 中调用），那么setImmediate的回调永远先执行。
  例子1：

// timeout_vs_immediate.jssetTimeout(() => {  console.log('timeout');
}, 0);

setImmediate(() => {  console.log('immediate');
});//输出：$ node timeout_vs_immediate.js
timeout
immediate

$ node timeout_vs_immediate.js
immediate
timeout

栗子2：

// timeout_vs_immediate.jsconst fs = require('fs');

fs.readFile(__filename, () => {
  setTimeout(() => {    console.log('timeout');
  }, 0);
  setImmediate(() => {    console.log('immediate');
  });
});//输出$ node timeout_vs_immediate.js
immediate
timeout

$ node timeout_vs_immediate.js
immediate
timeout

setImmediate Vs process.nextTick()

setImmediate()属于check观察者，其设置的回调函数，会插入到下次事件循环的末尾，每次事件循环只执行链表中的一个回调函数。process.nextTick()所设置的回调函数会存放到数组中，一次性执行所有回调函数（属于微任务）。process.nextTick()调用深度的限制，上限是1000，而setImmediate没有；

栗子：

setImmediate(() => console.log('immediate1'));
setImmediate(() => console.log('immediate2'));

setTimeout(() => console.log('setTimeout1'), 1000);
setTimeout(() => {    console.log('setTimeout2');
    process.nextTick(() => console.log('nextTick1'));
}, 0);
setTimeout(() => console.log('setTimeout3'), 0);

process.nextTick(() => console.log('nextTick2'));
process.nextTick(() => {
    process.nextTick(console.log.bind(console, 'nextTick3'));
});
process.nextTick(() => console.log('nextTick4'));//输出nextTick2
nextTick4
nextTick3
setTimeout2
setTimeout3
nextTick1
immediate1
immediate2
setTimeout1

分析如下：

在node中，nextTick的优先级高于setTimeout和setImmediate()，所以会先执行nextTick里面的信息打印。
但是对于嵌套的nextTick，会慢于同步的nextTick,所以nextTick4会先于nextTick3
然后开始一个Event Loop过程，首先执行timer阶段，而此时setTimeout所需要等待的时间是0，所以立即执行setTimeout2和setTimeout3里面的逻辑。而setTimeout1由于设置了执行时间，不满足执行条件，被放到下一轮Event Loop
当前Event Loop执行到check阶段，于是打印出immediate1、immediate2
执行后面的Event Loop,当setTimeout1达到执行条件时执行
node.js中的事件完成后，通知js主线程调用回调函数，等到js主线程空闲（主线程的代码执行完）时才去调用回调函数。

function heavyCompute(n) {    var count = 0,
        i, j;    for (i = n; i > 0; --i) {        for (j = n; j > 0; --j) {
            count += 1;
        }
    }    console.log('jisuan')
}var t = new Date();
setTimeout(function () {    console.log(new Date() - t);
}, 1000);
fs.readFile('./a.txt',(err,data)=>{    console.log(data)
})
heavyCompute(50000);console.log(9)console.log(3)//输出jisuan932365<Buffer 62 61 72 20 e5 be 88 e5 bf ab e5 b0 b1 e6 b0 b4 e7 94 b5 e8 b4 b9 62 61 72>

作者：fenerchen
链接：https://www.jianshu.com/p/5351ee68dc75