事件循环eventloop以及宏任务和微任务

已于 2022-05-06 15:15:37 修改
阅读量250 收藏 1
点赞数
分类专栏： JavaScript 文章标签： 前端 javascript 开发语言
于 2021-07-20 19:39:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leilei7407/article/details/118939622
版权
本文介绍了JavaScript的单线程特性和异步处理机制，包括网络请求、定时器和事件监听等耗时任务如何通过异步线程执行。浏览器为这些任务开辟了独立线程，任务完成后的回调函数通过事件循环机制进入执行队列。事件循环从上到下执行代码，遇到异步任务后挂起，待任务完成加入微任务或宏任务队列。执行完所有微任务后再进行一次浏览器渲染，接着从宏任务队列取出任务执行。这种机制确保了前端性能并避免页面假死。
摘要由CSDN通过智能技术生成

js是单线程的，而前端的某些任务是非常耗时的，比如网络请求，定时器和事件监听，如果让他们和别的任务一样，都老老实实的排队等待执行的话，执行效率会非常的低，甚至导致页面的假死。所以，浏览器为这些耗时任务开辟了另外的线程，主要包括http请求线程，浏览器定时触发器，浏览器事件触发线程，这些任务是异步的。
浏览器为网络请求这样的异步任务单独开了一个线程，当这些异步任务完成后，主线程怎么知道呢？答案就是回调函数，整个程序是事件驱动的，每个事件都会绑定相应的回调函数。
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

事件循环：
从上到下执行script(整体代码)，遇到异步代码时，会将这个事件挂起，继续执行执行栈中的其他同步任务。
当被挂起的异步代码执行完后，会将这个异步代码的回调函数加入事件队列中（若这个异步任务为宏任务，则加入宏任务队列。若这个异步任务为微任务，则加入微任务队列。）
当script(整体代码)执行完后，会执行微任务队列中所有的微任务。执行完所有的微任务后，然后进行浏览器渲染，再从宏任务队列中找一个宏任务进入执行栈中执行，然后再重复……
在这里插入图片描述

徕胖
关注
专栏目录
深入理解JavaScript事件循环Event Loop：宏任务与微任务
Allen-
05-11 805
事件循环是JavaScript运行时环境（如浏览器或Node.js）中用于协调执行代码的一种机制。「宏任务」（Macrotasks）和「微任务」（Microtasks），以确保异步操作能够有序且高效地完成，同时保证了代码的非阻塞执行特性。
[javascript核心-07] 带你彻底弄懂事件循环机制、宏任务、微任务
最新发布
技术无止境，人生仍探索。
06-06 650
带你彻底弄懂事件循环机制、宏任务、微任务，大前端知识体系与面试宝典，从前端到后端，全栈工程师，成为六边形战士
详解宏任务、微任务与事件循环 Event Loop
圆圆的 JavaScript 博客
10-19 1869
事件循环 Event Loop，是指浏览器或Node的一种解决javaScript单线程运行时“非阻塞”的一种机制，也就是我们经常使用异步的原理。本文会带你吃透“事件循环”，掌握底层原理，轻松应对JavaScript执行机制问题~
事件循环(EventLoop)、宏任务微任务
weixin_72953424的博客
07-31 320
如果你想哭那你就倒立，这样眼泪就不会流下来了
事件循环（Event Loop）的理解（宏任务与微任务、async与await执行流程）
weixin_58385666的博客
09-14 460
从上⾯我们可以看到，同步任务进⼊主线程，即主执⾏栈，异步任务进⼊任务队列，主线程内的任务执 ⾏完毕为空，会去任务队列读取对应的任务，推⼊主线程执⾏。上述过程的不断重复就事件循环。上⾯的例⼦中， await 会同步代码执⾏完，再回到 async 函数中，再执⾏之前阻塞的代码阻塞下⾯的代码（即加⼊微任务队列），先执⾏ async 外⾯的同步代码，5. 最后⼀⾏直接打印 script end ，现在同步代码执⾏完了，开始执⾏微任务，即 await 下⾯的 代码，打印 async1 end。
事件循环机制(Event Loop)和宏任务(macro-tast)微任务(micro-tast)，详细讲解！！！
m0_56698268的博客
03-03 704
事件循环机制(Event Loop)和宏任务(macro-tast)微任务(micro-tast)，详细讲解！！！
EventLoop事件循环、微任务、宏任务理解
sunshineTing2的博客
02-22 185
Javascript是一门单线程的非阻塞的脚本语言 单线程：任何时候都只有一个主线程来处理所有的任务。 非阻塞：当代码需要执行异步任务时，主线程会先挂起（pending）该任务，等异步任务返回结果后再根据一定的规则去执行相应的回调。 JS主要用途：是与用户互动，以及操作DOM。 进程和线程的关系 进程：程序的一次执行，占有一片独有的内存空间 线程：CPU的基本调度单位，是程序执行的一个完整流程 关系： 一个进程中一般至少有一个运行的线程：主线程 一个进程中也可以同时运行多个线程，说明程序是多线程运行的
JS事件循环机制event loop宏任务微任务原理解析
10-14
总之，JavaScript的事件循环机制是其异步编程模型的核心，理解宏任务和微任务的区别以及它们在事件循环中的执行顺序，对于编写高效、可维护的JavaScript代码至关重要。通过不断实践和学习，开发者可以更好地掌控...
JavaScript事件循环及宏任务微任务原理解析
11-19
JavaScript的事件循环（Event Loop）机制是理解和...理解事件循环、宏任务和微任务的概念对于编写高性能的JavaScript代码至关重要，特别是处理异步操作时，合理安排任务可以帮助避免阻塞主线程，提高应用的响应速度。
深入理解 Event Loop 之宏任务与微任务
weixin_43920582的博客
07-13 388
js运行机制 在了解宏任务与微任务之前，先了解一下js运行机制 js是单线程，运行在浏览器或者node环境中，所有任务都在一个线程上执行，这个时候有的同学可能就会想。为什么js是单线程的呢，如果是多线程的话不是可以提高效率吗？ 那么问题来了，如果是多线程的话，两条命令同时操作同一个DOM，一个是在DOM中添加内容，另一个是删除DOM。那么同时进行的话浏览器会不知所措，因为两条相互排斥的命令同时执行，本就是不应该的。 所以为了避免复杂性，JavaScript从一开始便是单线程，也是它的核心特征之一。 那么什么
面试官：说说Event Loop事件循环、微任务、宏任务
loveX001的博客
01-09 306
事件循环Event Loop又叫事件队列，两者是一个概念事件循环指的是js代码所在运行环境（浏览器、nodejs）编译器的一种解析执行规则。事件循环不属于js代码本身的范畴，而是属于js编译器的范畴，在js中讨论事件循环是没有意义的。换句话说，js代码可以理解为是一个人在公司中具体做的事情， 而 事件循环 相当于是公司的一种规章制度。两者不是一个层面的概念。微任务与宏任务就属于js代码的范畴js代码主要分为两大类： 同步代码、异步代码异步代码又分为：微任务与宏任务。
Event loop微任务宏任务
BUG_devil的博客
07-29 679
微任务、宏任务
宏任务、微任务与Event Loop
xuzhaokuan的博客
03-16 371
说到宏任务和微任务，我们就不得不提 Event Loop 了 首先我们要知道两点： JavaScript是单线程的语言 Event Loop是javascript的执行机制 javascript事件循环 一般来说，非阻塞性的任务采取同步的方式，直接在主线程的执行栈完成。 一般来说，阻塞性的任务都会采用异步来执行，异步的工作一般会交给其他线程完成，然后回调函数会放到事件队列中。 从...
微任务与宏任务与eventloop
weixin_45766034的博客
10-22 153
首先我们需要了解一个概念，在promise执行之前是同步任务，再.then和.catch之后变成微任务 执行完同步任务之后，优先执行微任务 执行顺序是： 同步任务 ==> 微任务 ==>宏任务 js是单线程的语言，不会同时执行两行代码，当我们出现alert弹窗时，是无法执行下面的console.info的 setTimeout(_ => console.log(4)) new Promise(resolve => { resolve() console.log(1)
JS异步 & event loop 事件循环机制 & 宏任务和微任务
weixin_41246825的博客
03-24 221
一：单线程和异步 JS是单线程语言，只能同时做一件事 浏览器和nodejs已支持JS启动进程，如Web Worker JS和Dom渲染共用一个线程 进程（process）:系统中正在运行的一个应用程序；程序一旦运行就成为了一个进程 线程（thread）：线程时进程的最小执行单位，一个进程中可以只有一个线程，这称为单线程，也可以存在多个线程并行执行不同的任务，这称为多线程 基于JS是单线程语言，但是同步会阻塞代码执行，异步不会阻塞代码执行(是以回调callback函数形式)，故在JS的应用中引入了异
理解宏任务、微任务与Event Loop
qq_41396714的博客
04-02 148
第三方链接地址：https://www.cnblogs.com/amiezhang/p/11349450.html#4378479
事件循环机制，宏任务、微任务
xiao_yu_liu的博客
05-18 3080
浏览器事件循环，node事件循环，浏览器eventloop，node eventloop，setImmediate对比process.nextTick
事件循环与宏任务微任务
m0_67896102的博客
11-30 511
本文介绍了事件循环即宏任务和微任务，阅读后对这方面的知识理解能够有一些帮助。
浅谈微任务，宏任务
weixin_44207938的博客
03-14 159
JS是一个事件驱动型语言，每个事件都是任务，多个任务组成的列表称为任务列，执行完一个任务列接着执行下一个任务列，每个任务都是等待消息，接受消息，执行任务，这个就是eventloop。 每个任务列里又有微任务，宏任务和同步任务，同步任务就是同时执行代码 微任务是promise，async，await，遇到微任务要把它放在目前所在列的最底端； 宏任务就是setTimeout，setInterval,遇到宏任务要把它放在下一个任务列的最顶端。 宏任务里放微任务比微任务里放宏任务优先执行 下面代码执行结果为1 0
JavaScript事件循环与微任务宏任务解析
"前端大厂最新面试题集中在事件循环机制上，主要探讨JavaScript的单线程执行、同步任务与异步任务的区别，以及宏任务和微任务的详细概念。" 在JavaScript的世界里，事件循环（Event Loop）是理解其非阻塞特性的重要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值