简洁明了探索浏览器Event loop

DrizzleX 发布于2019-08-23 17:10 / 3211人阅读

摘要：前段时间我对于浏览器中的和哪个先执行有所困惑，苦于搜索也没有发现很明确的答案，于是决定深入探索浏览器，现有所愚见，想与大家分享，希望能帮助到那些还在爬坑的人。浏览器端中的异步队列有两种队列和队列。浏览器会不断从队列中按顺序取执行。

前段时间我对于浏览器Event loop中的MacroTask和MicroTask哪个先执行有所困惑，苦于搜索也没有发现很明确的答案，于是决定深入探索浏览器Event loop，现有所愚见，想与大家分享，希望能帮助到那些还在爬坑的人。
1.什么是Event loop？

developer.mozilla.org给出的解释是这样的：

一个 JavaScript 运行时包含了一个待处理的消息队列。每一个消息都关联着一个用以处理这个消息的函数。

在事件循环期间的某个时刻，运行时从最先进入队列的消息开始处理队列中的消息。

大致可以理解为Event loop用来处理JavaScript事件执行的先后顺序。浏览器端Event loop中的异步队列有两种：MacroTask队列和 MicroTask队列。它们分别包括：

2.关于MacroTask和MicroTask。

MicroTask： process.nextTick ，promise ，MutationObserver，其中 process.nextTick 为 Node 独有。
MacroTask： script（整体代码），setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。

浏览器会不断从task队列中按顺序取task执行。
大体情况如下：

每执行完一个Macrotask都会检查microtask队列是否为空，如果不为空则会一次性执行完所有microtask。

3.同步事件和异步事件怎么处理？

一开始执行栈空,micro 队列空，macro 队列里有且只有一个 script 脚本（整体代码）。然后全局上下文（script 标签）被推入执行栈，同步代码执行。在执行的过程中，会判断是同步任务还是异步任务，通过对一些接口的调用，可以产生新的 macro-task 与 micro-task，它们会分别被推入各自的任务队列里。同步代码执行完了，script 脚本会被移出 macro 队列，这个过程本质上是队列的 macro-task 的执行和出队的过程。需要注意的是：当 macro-task 出队时，任务是一个一个执行的；而 micro-task 出队时，任务是一队一队执行的。因此，我们处理 micro 队列这一步，会逐个执行队列中的任务并把它出队，直到队列被清空。

也就是说循环是这样一个过程：
先执行宏任务,然后查看是否有微任务队列。如果有，先执行微任务队列中的所有任务，如果没有，会读取宏任务队列中排在最前的任务，执行宏任务的过程中，遇到微任务，依次加入微任务队列。栈空后，再次读取微任务队列里的任务。

4：总结
一句话：

对于浏览器Event loop来说，由于script（整体代码）先执行，所以说MacroTask先于MicroTask执行。

参考文章:

浏览器与Node的事件循环(Event Loop)有何区别?
一篇文章教会你Event loop
什么是浏览器的事件循环

私有云服务器托管 Event Loop Loops Loop Nested-Loop

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

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

探秘JS的异步单线程

摘要：对于通常的特别是那些具备并行计算多线程背景知识的来讲，的异步处理着实称得上诡异。而这个诡异从结果上讲，是由的单线程这个特性所导致的。的特性之一是单线程，也即是从头到尾，都在同一根线程下运行。而这两者的不同，便在于单线程和多线程上。对于通常的developer（特别是那些具备并行计算/多线程背景知识的developer）来讲，js的异步处理着实称得上诡异。而这个诡异从结果上讲，是由js...

cooxer 2019-08-23 11:51 评论0 收藏0
GMTC 2019 参会回顾

摘要：回顾上一次参加还是年。年的还是真正的，年的会议早已经把英文全称去掉，改称全球大前端技术大会。同时与产品协作从产品设计方面突出关注点，做产品设计方面的优化，如站新版改造减少页面元素，将播放器窗口直接显示在第一屏。回顾上一次参加 GMTC 还是 2017 年。那时的我还是刚刚参加工作并在试用期辞职的菜鸟。 2017 年的 GMTC 还是真正的 Global Mobile Tech Co...

Zack 2019-08-23 18:15 评论0 收藏0
JavaScript Event loop 事件循环

摘要：阶段有两个主要功能也会执行时间定时器到达期望时间的回调函数执行事件循环列表里的函数当进入阶段并且没有其余的定时器，那么如果事件循环列表不为空，则迭代同步的执行队列中的函数。如果没有，则等待回调函数进入队列并立即执行。 Event Loop 本文以 Node.js 为例，讲解 Event Loop 在 Node.js 的实现，原文，JavaScript 中的实现大同小异。什么是 Eve...

luckyyulin 2019-08-21 17:37 评论0 收藏0
浏览器与NodeJS的EventLoop异同，以及部分机制。

摘要：浏览器与的异同，以及部分机制有人对部分迷惑，本身构造函数是同步的，是异步。浏览器的的已全部分析完成，过程中引用阮一峰博客，知乎，部分文章内容，侵删。浏览器与NodeJS的EventLoop异同，以及部分机制 PS：有人对promise部分迷惑，Promise本身构造函数是同步的，.then是异步。---- 2018/7/6 22：35修改 javascript 是一门单线程的脚本...

jubincn 2019-08-22 18:32 评论0 收藏0