【基础篇】浏览器中的Event loop

alin 发布于2019-08-23 10:38 / 2761人阅读

摘要：队列分为两种微任务，中称为。以下这些行为属于微任务宏任务，中称为。因为宏任务汇中包括了，浏览器会先执行一个宏任务，接下来有异步代码的话就先执行微任务。

在讲Event loop之前，我们先思考一个问题

js为什么是单线程？

原因可能是如果js是多线程，在多个线程中处理DOM就可能会发生问题（一个线程添加新节点，另一个线程中删除节点），当然可以引入读写锁解决这个问题

好了，接下来我们开始讲Event loop

简单的说，就是js在执行的过程中会产生执行环境，这些执行环境会被顺序的加入到执行栈中。如果遇到异步的代码，会被挂起并加入到Task（有多种Task）队列中。一旦执行栈为空，Event Loop就会从Task队列中拿出需要执行的代码并放入执行栈中执行，所以本质上来说，js中的异步行为还是同步的。

我们看下以下代码，以下代码输出"1", "3", "2"

console.log("1");
setTimeout(()=>{
  console.log("2");
}, 0);
console.log("3");
//"1"
//"3"
//"2"

之前对setTimeout理解有偏差，虽然设置了为0，其实还是异步，是因为html5标准规定这个函数的第二个参数不得小于4ms，不足会自动增加。

Task队列分为两种

微任务microtask，es6中称为jobs。以下这些行为属于微任务

process.nextTick

promise

Object.observe

MutationObserver

宏任务macrotask，es6中称为task。以下这些行为属于宏任务

script

setTimeout

setInterval

setImmediate

I/O

UI rendering

误区：很多人认为微任务快于宏任务，其实是错误的。因为宏任务汇中包括了script，浏览器会先执行一个宏任务，接下来有异步代码的话就先执行微任务。

正确的一次Event loop顺序应该是这样的：

执行同步代码（这属于宏任务）

执行栈为空，查询是否有微任务需要执行

执行所有微任务

必要的话渲染UI

开始下一轮Event loop，执行宏任务中的异步代码

通过上述的Event loop顺序可知，如果宏任务中的异步代码有大量的计算并且需要操作DOM的话，为了更快的界面响应，我们可以把操作DOM放入微任务中。

云服务器服务器托管 Event Loop 基础篇之基础篇 java语言程序设计基础篇

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

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

一篇文章教会你Event loop——浏览器和Node

摘要：如果没到毫秒，那么阶段就会跳过，进入阶段，先执行的回调函数。参考文档什么是浏览器的事件循环不要混淆和浏览器中的定时器详解浏览器和不同的事件循环深入理解事件循环机制篇中的执行机制最近对Event loop比较感兴趣，所以了解了一下。但是发现整个Event loop尽管有很多篇文章，但是没有一篇可以看完就对它所有内容都了解的文章。大部分的文章都只阐述了浏览器或者Node二者之一，没有对比...

Leck1e 2019-08-22 15:33 评论0 收藏0
『前端干货篇』: 你不知道的Event Loop

摘要：任务队列中的任务事件，一般有个共性就是存在回调函数。存放异步执行的代码，如定时器事件监听回调函数等，进入等待状态。总结的事件轮询的机制，使任务队列主线程异步操作之间可以相互协作。从一道面试题说起 setTimeout(function() { console.log(111); }, 0); // 这里定时器时间设置为0ms后执行 console.log(222); 相信这...

mykurisu 2019-08-23 14:32 评论0 收藏0
JavaScript 异步编程

摘要：下面我将介绍的基本用法以及如何在异步编程中使用它们。在没有发布之前，作为异步编程主力军的回调函数一直被人诟病，其原因有太多比如回调地狱代码执行顺序难以追踪后期因代码变得十分复杂导致无法维护和更新等，而的出现在很大程度上改变了之前的窘境。前言自己着手准备写这篇文章的初衷是觉得如果想要更深入的理解 JS，异步编程则是必须要跨过的一道坎。由于这里面涉及到的东西很多也很广，在初学 JS 的...

lordharrd 2019-08-23 12:26 评论0 收藏0
【译】node js event loop part 1.1

原文先说1.1总揽： Reactor模式 Reactor模式中的协调机制Event Loop Reactor模式中的事件分离器Event Demultiplexer 一些Event Demultiplexer处理不了的复杂I/O接口比如File I/O、DNS等复杂I/O的解决方案未完待续前言 nodejs和其他编程平台的区别在于如何去处理I/O接口，我们听一个人介绍nodejs，总是...

macg0406 2019-08-22 13:53 评论0 收藏0
笔试题之Event Loop终极篇

摘要：下面开始分析开头的代码第一轮事件循环流程整体作为第一个宏任务进入主线程，遇到，输出遇到函数声明，声明暂时不用管遇到，其回调函数被分发到微任务中。我们记为遇到，其回调函数被分发到宏任务中。先上一道常见的笔试题 console.log(1); async function async1() { console.log(2); await async2(); con...

niceforbear 2019-08-23 18:09 评论0 收藏0