JS JavaScript事件循环机制

dantezhao 发布于2019-08-23 14:49 / 3471人阅读

摘要：事件循环机制首先区分进程和线程进程是资源分配的最小单位系统会给它分配内存不同的进程之间是可以同学的，如管道命名管道消息队列一个进程里有单个或多个线程浏览器是多进程的，因为系统给它的进程分配了资源内存打开会有一个主进程，每打开一个页就有一个独

JS JavaScript事件循环机制 首先区分进程和线程

进程是cpu资源分配的最小单位（系统会给它分配内存）

不同的进程之间是可以同学的，如管道、FIFO(命名管道)、消息队列

一个进程里有单个或多个线程

浏览器是多进程的，因为系统给它的进程分配了资源（cpu、内存）（打开Chrome会有一个主进程，每打开一个Tab页就有一个独立的进程）

浏览器的渲染进程是多线程的

GUI渲染线程

JS引擎线程

事件触发线程

定时触发器线程

异步HTTP请求线程

事件循环机制

上图解释：

同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数

当指定的事情完成时，Event Table会将这个函数移入Event Queue

当栈中的代码执行完毕，执行栈（call stack）中的任务为空时，就会读取任务队列（Event quene）中的事件，去执行对应的回调

如此循环，形成js的事件循环机制（Event Loop）

宏任务（macrotask）和微任务（microtask）

先看一段代码的执行结果：

console.log("script start");

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

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("script end");

执行结果： script start , script end , promise1 , promise2 , setTimeout

JS中分为两种任务类型：macrotask和microtask，在ECMAScript中，microtask称为jobs，macrotask可称为task

macrotask（又称之为宏任务），可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）

每一个task会从头到尾将这个任务执行完毕，不会执行其它

浏览器为了能够使得JS内部task与DOM任务能够有序的执行，会在一个task执行结束后，在下一个 task 执行开始前，对页面进行重新渲染（task->渲染->task->...）

microtask（又称为微任务），可以理解是在当前 task 执行结束后立即执行的任务

也就是说，在当前task任务后，下一个task之前，在渲染之前

所以它的响应速度相比setTimeout（setTimeout是task）会更快，因为无需等渲染

也就是说，在某一个macrotask执行完后，就会将在它执行期间产生的所有microtask都执行完毕（在渲染前）

分别什么样的场景会形成macrotask和microtask呢？

macrotask：主代码块，setTimeout，setInterval等（可以看到，事件队列中的每一个事件都是一个macrotask）

microtask：Promise，process.nextTick等

补充：在node环境下，process.nextTick的优先级高于Promise，也就是可以简单理解为：在宏任务结束后会先执行微任务队列中的nextTickQueue部分，然后才会执行微任务中的Promise部分。

总结下运行机制：

执行一个宏任务（栈中没有就从事件队列中获取）

执行过程中如果遇到微任务，就将它添加到微任务的任务队列中

宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）

当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染

渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

如图：

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101187.html

JavaScript运行机制和事件循环

摘要：主线程不断重复上面的三步，此过程也就是常说的事件循环。所以主线程代码执行时间过长，会阻塞事件循环的执行。参考资料这一次，彻底弄懂执行机制任务队列的顺序机制事件循环搞懂异步事件轮询与中的事件循环 1. 说明读过本文章后，您能知道： JavaScript代码在浏览器中的执行机制和事件循环面试中经常遇到的代码输出顺序问题首先通过一段代码来验证你是否了解代码输出顺序，如果你不知道输出...

Ververica 2019-08-23 14:42 评论0 收藏0
Javascript系列之javascript机制

摘要：异步任务必须指定回调函数，当异步任务从任务队列回到执行栈，回调函数就会执行。事件循环主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为。事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。参考链接：这一次，彻底弄懂 JavaScript 执行机制https://zhuanlan.zhihu.com/p/...从浏览器多进程到JS单线程，JS运行机制...

13651657101 2019-08-22 15:50 评论0 收藏0
JS浏览器事件循环机制

摘要：事件循环机制事件循环机制分为浏览器和事件循环机制，两者的实现技术不一样，浏览器是中定义的规范，是由库实现。整个事件循环完成之后，会去检测微任务的任务队列中是否存在任务，存在就执行。文章来自我的 github 博客，包括技术输出和学习笔记，欢迎star。先来明白些概念性内容。进程、线程进程是系统分配的独立资源，是 CPU 资源分配的基本单位，进程是由一个或者多个线程组成的。线...

zebrayoung 2019-08-22 18:33 评论0 收藏0
JS与Node.js中的事件循环

摘要：的单线程，与它的用途有关。特点的显著特点异步机制事件驱动。队列的读取轮询线程，事件的消费者，的主角。它将不同的任务分配给不同的线程，形成一个事件循环，以异步的方式将任务的执行结果返回给引擎。这两天跟同事同事讨论遇到的一个问题，js中的event loop，引出了chrome与node中运行具有setTimeout和Promise的程序时候执行结果不一样的问题，从而引出了Nodejs的...

abson 2019-08-22 11:14 评论0 收藏0
这一次，彻底弄懂 JavaScript 执行机制

摘要：事件完成，回调函数进入。主线程从读取回调函数并执行。终于执行完了，终于从进入了主线程执行。遇到，立即执行。宏任务微任务第三轮事件循环宏任务执行结束，执行两个微任务和。事件循环事件循环是实现异步的一种方法，也是的执行机制。本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作...

dreambei 2019-08-23 15:21 评论0 收藏0