摘要：为了利用多核的计算能力，提出标准，允许脚本创建多个线程，但是子线程完全受主线程控制，且不得操作。所以，这个新标准并没有改变单线程的本质。
从一个例子说起
var start = new Date()
setTimeout(function () {
var end = new Date
console.log("Time elapsed:", end - start, "ms")
}, 500)
while (new Date() - start < 1000) {
}
有其他语言能完成预期的功能吗？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 & setImmediateprocess.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");
})
总结
通过学习函数调用栈，任务队列，MacroTask, MicroTask等概念，对js中的事件循环机制有更深的理解，在以后面对setTimeout, setInterval等异步操作时，更清晰的理解其运行机制，避免写出不可控的代码。
参考链接：https://zhuanlan.zhihu.com/p/...
https://zhuanlan.zhihu.com/p/...
http://www.ruanyifeng.com/blo...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92058.html
摘要：主线程不断重复上面的三步，此过程也就是常说的事件循环。所以主线程代码执行时间过长，会阻塞事件循环的执行。参考资料这一次，彻底弄懂执行机制任务队列的顺序机制事件循环搞懂异步事件轮询与中的事件循环 1. 说明 读过本文章后，您能知道： JavaScript代码在浏览器中的执行机制和事件循环 面试中经常遇到的代码输出顺序问题 首先通过一段代码来验证你是否了解代码输出顺序，如果你不知道输出...
摘要：主线程要明确的一点是，主线程跟执行栈是不同概念，主线程规定现在执行执行栈中的哪个事件。主线程循环即主线程会不停的从执行栈中读取事件，会执行完所有栈中的同步代码。以上参考资料详解中的事件循环机制中的事件循环运行机制详解再谈 showImg(https://segmentfault.com/img/remote/1460000015317437?w=1920&h=1080); 前言 大家都...
摘要：前沿是基于引擎的运行环境具有事件驱动非阻塞等特点结合具有网络编程文件系统等服务端的功能用库进行异步事件处理线程的单线程含义实际上说的是执行同步代码的主线程一个程序的启动不止是分配了一个线程，而是我们只能在一个线程执行代码当出现资源调用连接等 前沿 Node.js 是基于V8引擎的javascript运行环境. Node.js具有事件驱动, 非阻塞I/O等特点. 结合Node API, ...
摘要：事件循环机制事件循环机制分为浏览器和事件循环机制，两者的实现技术不一样，浏览器是中定义的规范，是由库实现。整个事件循环完成之后，会去检测微任务的任务队列中是否存在任务，存在就执行。 文章来自我的 github 博客，包括技术输出和学习笔记，欢迎star。 先来明白些概念性内容。 进程、线程 进程是系统分配的独立资源，是 CPU 资源分配的基本单位，进程是由一个或者多个线程组成的。 线...
摘要：如果没有其他异步任务要处理比如到期的定时器，会一直停留在这个阶段，等待请求返回结果。执行的执行事件关闭请求的，例如事件循环的每一次循环都需要依次经过上述的阶段。因此，才会早于执行。 showImg(https://segmentfault.com/img/bVbnY76); 概念 同步任务（Synchronous） 在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务 ...
摘要：事件循环机制首先区分进程和线程进程是资源分配的最小单位系统会给它分配内存不同的进程之间是可以同学的，如管道命名管道消息队列一个进程里有单个或多个线程浏览器是多进程的，因为系统给它的进程分配了资源内存打开会有一个主进程，每打开一个页就有一个独 JS JavaScript事件循环机制 首先区分进程和线程 进程是cpu资源分配的最小单位（系统会给它分配内存） 不同的进程之间是可以同学的，如...
阅读 1768·2021-11-23 09:51
阅读 1219·2021-11-18 10:02
阅读 951·2021-10-25 09:44
阅读 2081·2019-08-26 18:36
阅读 1602·2019-08-26 12:17
阅读 1132·2019-08-26 11:59
阅读 2729·2019-08-23 15:56
阅读 3319·2019-08-23 15:05
