js的Event Loop机制解析

alexnevsky 发布于2019-08-22 16:33 / 2257人阅读

摘要：概述最近看了一些异步的文章，有一些作者没有写代码也把错误的理解放上来。栈主线程的函数执行，异步操作的执行放在了异步处理模块。这里面的栈，仅仅是代表了调用栈。

概述

最近看了一些异步的文章，有一些作者没有写代码也把错误的理解放上来。想想，我也应该总结一些，之前面试也有过一道题目，虽然说是考察异步，但其实就是考察异步当中的任务队列。给你一道题目，你觉得会依次输出什么？

console.log("1")

Promise.resolve().then(() => console.log("2"))

setTimeout(() => {console.log("3"); Promise.resolve().then(() => console.log("4"))}, 0)

Promise.resolve().then(() => console.log("5"))

setTimeout(() => console.log("6"), 0)

console.log("7")

答案是

1 7 2 5 3 4 6

如果你知道为什么会输出这些的话，那我想你不必看下面了，因为你也有大概的理解，如果没有的话，我就跟你分析一下吧。

先看一张图吧，是拿别人的，有部分原因也是因为他写的文章有错误，我才总结。

先理解这张图片吧，我简单介绍一下。

栈：主线程的函数执行，异步操作的执行放在了异步处理模块。

堆：用来存储引用类型的指向。

异步处理模块：主线程里面的异步模块。

任务队列：存储异步线程的执行队列。

然后，js运行就是运行主线程->运行任务队列

当然，这只是大概的介绍，真正的堆和栈并不是和他说的一样，栈里面还有内存栈和调用栈，内存栈又有全局的内存栈，也有某个函数的内存栈，当然，函数内部的内存栈又放在了堆里面。这里面的栈，仅仅是代表了调用栈。

宏任务队列（macrotasks）

什么是宏任务队列？

宏任务队列macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering

上面的基本操作就是宏任务队列

微任务队列（microtasks）

微任务队列microtasks: process.nextTick, Promise, MutationObserver

上面的基本操作就是微任务队列

Event Loop

我就简单的说一下js里面执行顺序吧:

执行主线程，如果有异步操作，则放到异步队列执行。执行2

当主线程执行完毕，判断异步队列是否有微任务，如果有，则添加进去主线程执行；如果没有则将最新可以执行的宏任务加进主线程。返回1

是不是很简单？
那么上面那道题的结果无非就是

// 一开始，主线程
console.log("1");
console.log("7");

// 下一步，主线程
Promise.resolve().then(() => console.log("2"))

// 下一步，主线程
Promise.resolve().then(() => console.log("5"))

// 下一步，主线程
setTimeout(() => {console.log("3")}, 0)

// 下一步，主线程
Promise.resolve().then(() => console.log("4"))

// 下一步，主线程
setTimeout(() => console.log("6"), 0)

总结

看了一下很多文章，以为很难，很想画图，但是在写的过程中，发现其实真的很简单，只要好好了解js里面的引擎就好了，js还是一个很强大的单线程语言。

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

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

Javascript 运行机制详解，Event Loop

摘要：主线程在任务队列中读取事件，这个过程是循环不断地，所以这种运行机制叫做事件循环是在执行栈同步代码结束之后，下一次任务队列执行之前。单线程 javascript为什么是单线程语言，原因在于如果是多线程，当一个线程对DOM节点做添加内容操作的时候，另一个线程要删除这个DOM节点，这个时候，浏览器应该怎么选择，这就造成了混乱，为了解决这类问题，在一开始的时候，javascript就采用单线...

Jingbin_ 2019-08-23 10:39 评论0 收藏0
10分钟理解JS引擎的执行机制

摘要：深入理解引擎的执行机制灵魂三问为什么是单线程的为什么需要异步单线程又是如何实现异步的呢中的中的说说首先请牢记点是单线程语言的是的执行机制。深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeout 首先,请牢记2...

zzbo 2019-08-26 17:04 评论0 收藏0
浏览器与Node的事件循环(Event Loop)有何区别?

摘要：事件触发线程主要负责将准备好的事件交给引擎线程执行。它将不同的任务分配给不同的线程，形成一个事件循环，以异步的方式将任务的执行结果返回给引擎。 Fundebug经作者浪里行舟授权首发，未经同意请勿转载。前言本文我们将会介绍 JS 实现异步的原理，并且了解了在浏览器和 Node 中 Event Loop 其实是不相同的。一、线程与进程 1. 概念我们经常说 JS 是单线程执行的，...

TANKING 2019-08-23 14:43 评论0 收藏0
Js 的事件循环(Event Loop)机制以及实例讲解

摘要：主线程要明确的一点是，主线程跟执行栈是不同概念，主线程规定现在执行执行栈中的哪个事件。主线程循环即主线程会不停的从执行栈中读取事件，会执行完所有栈中的同步代码。以上参考资料详解中的事件循环机制中的事件循环运行机制详解再谈 showImg(https://segmentfault.com/img/remote/1460000015317437?w=1920&h=1080); 前言大家都...

Anshiii 2019-08-22 18:07 评论0 收藏0
【转】深入理解JS单线程机制【原文作者：MasterYao】

摘要：的单线程，与它的用途有关。只要指定过回调函数，这些事件发生时就会进入任务队列，等待主线程读取。四主线程从任务队列中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为事件循环。令人困惑的是，文档中称，指定的回调函数，总是排在前面。原文：http://www.cnblogs.com/Master... 一、为什么JavaScript是单线程？ JavaScript语言的一大特点...

LittleLiByte 2019-08-20 14:39 评论0 收藏0