概念
- js单线程,允许创建多线程,子线程完全受主线程控制,且不得操作DOM
- js主线程拥有一个执行栈及任务一个任务队列
- 异步操作 -> 回调函数推入任务队列 -> 主线程执行栈清空读取回调 -> 队列读取完毕 -> 主线程执行
- 浏览器事件表 -> 事件队列 -> 执行栈(类似函数的调用栈)
- 异步方法操作DOM,浏览器会在每一个任务执行结束后渲染窗口
- 每一个task任务结束之后,浏览器会对页面进行渲染
- setTimeout 会在延迟时间结束后分配一个新的task到event loop中
- 在js中microtask称之为jobs,而task通常指macrotask(大小任务之分)
- (script) macrotask -> microtask queue (含有promise.then) -> macrotask(setTimeout) -> 下一个microtask
初见
- Java, 在Java.util.Timer中,对于定时任务的解决方案是通过多线程手段实现的,任务对象存储在任务队列,由专门的调度线程,在新的子线程中完成任务的执行。
js是单线程的
JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。
为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。
调用栈
JS执行时会形成调用栈,调用一个函数时,返回地址、参数、本地变量都会被推入栈中,如果当前正在运行的函数中调用另外一个函数,则该函数相关内容也会被推入栈顶.该函数执行完毕,则会被弹出调用栈.变量也随之弹出,由于复杂类型值存放于堆中,因此弹出的只是指针,他们的值依然在堆中,由GC决定回收.
事件循环(event loop) & 任务队列(task queue)
JavaScript 主线程拥有一个执行栈以及一个任务队列
遇到异步操作(例如:setTimeout, AJAX)时,异步操作会由浏览器(OS)执行,浏览器会在这些任务完成后,将事先定义的回调函数推入主线程的任务队列(task queue)中,当主线程的执行栈清空之后会读取task queue中的回调函数,当task queue被读取完毕之后,主线程接着执行,从而进入一个无限的循环,这就是事件循环.
主线程执行栈 & 任务队列 循环执行,构成事件循环
小结
setTimeout()只是将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行。
另一个例子
(function test() {
setTimeout(function() {console.log(4)}, 0);
new Promise(function executor(resolve) {
console.log(1);
for( var i=0 ; i<10000 ; i++ ) {
i == 9999 && resolve();
}
console.log(2);
}).then(function() {
console.log(5);
});
console.log(3);
})()
Macrotask & Microtask
macrotask 和 microtask 是异步任务的两种分类。在挂起任务时,JS 引擎会将所有任务按照类别分到这两个队列中,首先在 macrotask 的队列(这个队列也被叫做 task queue)中取出第一个任务,执行完毕后取出 microtask 队列中的所有任务顺序执行;之后再取 macrotask 任务,周而复始,直至两个队列的任务都取完。
macro-task: script(整体代码),
setTimeout, setInterval, setImmediate, I/O, UI rendering
micro-task:
process.nextTick, Promises(这里指浏览器实现的原生 Promise), Object.observe, MutationObserver
结论
全部代码(script) macrotask -> microtask queue (含有promise.then) -> macrotask(setTimeout) -> 下一个microtask
Node.js的事件循环
process.nextTick & setImmediate
-
process.nextTick指定的任务总是发生在所有异步任务之前
-
setImmediate指定的任务总是在下一次Event Loop时执行
process.nextTick(function A() { console.log(1); process.nextTick(function B(){console.log(2);}); }); setTimeout(function timeout() { console.log('TIMEOUT FIRED'); }, 0) new Promise(function(resolve) { console.log('glob1_promise'); resolve(); }).then(function() { console.log('glob1_then') }) process.nextTick(function() { console.log('glob1_nextTick'); })