基础 事件循环， 宏任务，和微任务

已于 2022-11-18 00:13:48 修改
阅读量244 收藏
点赞数 2
文章标签： 前端 javascript 开发语言
于 2022-11-17 23:16:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20623665/article/details/127913911
版权

首先js是一门单线程语言，一次只能执行一件事情，而浏览器是多线程的

js只能在宿主环境下运行，也就是浏览器，node.js里运行

当 定时器，用户触发事件，以及发送网络请求时就会产生对应的任务

浏览器的主线程依次取出任务来执行，此过程不断重复而形成事件循环

当任务排队执行是，浏览器会把任务分为宏任务和微任务

宏任务：JavaScript    定时器    dom事件

微任务：pormise.then     等等

直接贴图分析

 

 下图还存在定时器插队，虽然T2定时器比T3定时器先被识别为异步任务，但是T3定时器先把数据放入队列执行，T2在5秒后才会放入

如果是嵌套关系的定时器,是不会存在插队的

上帝喜欢糖
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[javascript核心-07] 带你彻底弄懂事件循环机制、宏任务、微任务
技术无止境，人生仍探索。
06-06 581
带你彻底弄懂事件循环机制、宏任务、微任务，大前端知识体系与面试宝典，从前端到后端，全栈工程师，成为六边形战士
JavaScript事件循环演示
09-03
演示JavaScript同步任务、宏任务、微任务的执行机制
事件轮询(Event Loop) 宏任务与微任务
weixin_58340013的博客
09-22 1964
事件轮询(Event Loop) 宏任务与微任务
循环机制（event loop）之宏任务和微任务
最新发布
weixin_38647954的博客
05-06 957
js任务分为同步任务和异步任务异步任务又分为宏任务和微任务，其中异步任务属于耗时的任务。
事件循环机制(Event Loop)和宏任务(macro-tast)微任务(micro-tast)，详细讲解！！！
m0_56698268的博客
03-03 669
事件循环机制(Event Loop)和宏任务(macro-tast)微任务(micro-tast)，详细讲解！！！
事件循环（消息机制）、宏任务、微任务
qq_34754747的博客
07-12 698
可以判定使用什么函数去处理代码：例如，你需要在dom渲染之前做好逻辑处理，等待dom渲染完毕后，展示于页面，此时必用微任务方式处理；反之需要获取dom的操作就需要采用宏任务的相关代码去包裹处理函数，才不至于获取不到元素而报错！！！宏任务：script (可以理解为外层同步代码)；setTimeout/setInterval3；UI rendering/UI事件；postMessage，MessageChannel5. setImmediate，I/O（Node.js）微任务：Promise、async/aw
事件循环机制，宏任务、微任务
xiao_yu_liu的博客
05-18 3050
浏览器事件循环，node事件循环，浏览器eventloop，node eventloop，setImmediate对比process.nextTick
JavaScript事件循环及宏任务微任务原理解析
11-19
其中涉及到事件循环（event loop），宏任务（macrotask），微任务(microtask) 一、事件循环 Event Loop 程序中设置两个线程：一个负责程序本身的运行，称为”主线程”；另一个负责主线程与其他进程（主要是各种I/O...
JS事件循环机制event loop宏任务微任务原理解析
10-14
主要介绍了JS事件循环机制event loop宏任务微任务原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
JS事件循环机制：同步任务，宏任务，微任务
qq_51532249的博客
05-29 712
同步任务、宏任务和微任务属于 JavaScript 中的事件循环机制的问题。在 JavaScript 运行环境中，存在一个主线程和任务队列，所有代码都会被排入任务队列中。当主线程空闲时，它会从任务队列中取出一个任务并执行。而 JavaScript 中的任务可以分为三种类型，它们在任务队列中的排列顺序不同。同步任务是直接在主线程上执行的任务，按照顺序依次执行。而宏任务和微任务则是异步执行的任务，会先被放入对应的任务队列中，等待主线程上的任务执行完毕后再去取出并执行宏任务和微任务。
js事件循环机制（event loop）之宏任务/微任务
杨前露的博客
10-18 2535
1.关于js js是单线程的，即主线程就只有一个 2.js事件循环 除了广义的同步任务和异步任务，对任务更细致费划分： macro-task(宏任务)：包括整体代码script，setTimeout，setInterval等 micro-task(微任务)：Promise，process.nextTick等 js执行的时候： 第一步：js解释器识别所有js代码，将同步的代码放到.........
深层理解JavaScript事件循环/微任务宏任务
wangteng4154的博客
12-07 616
JavaScript 在单个线程上执行所有操作，但您是否觉得它通过使用一些复杂的数据结构给人一种多线程的错觉？
让你理解: 事件循环 eventloop
hmxs_hmbb的博客
05-23 518
面试官问起事件循环, 不会回答? 我来让你知道什么是事件循环
面试题 事件机制---微任务和宏任务
Uxiao7的博客
07-20 228
面试题 事件机制—微任务和宏任务 1.事件机制,在js中,任务被分为两种,一种宏任务macroTask一种微任务microtask 2.宏任务:script,setTimeout,setInterval,ui render 3.微任务:Promise,Object.observe 在执行任务时:js引擎会将任务分类,宏任务的队列和微任务队列. 等待宏任务执行完之后在取微任务. 例子: console.log('1'); //1.先执行 输出1 //2.js代码向下走 函数没调用 async functio
JavaScript宏任务和微任务
weixin_34321753的博客
03-18 570
最近问了大佬一个问题，监听和定时器两个性能的问题，大佬给我普及了宏任务和微任务的概念，于是网上找见了这样一段代码： console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0); Promise.resolve().then(function() { consol...
事件循环（Event Loop）的理解（宏任务与微任务、async与await执行流程）
weixin_58385666的博客
09-14 416
从上⾯我们可以看到，同步任务进⼊主线程，即主执⾏栈，异步任务进⼊任务队列，主线程内的任务执 ⾏完毕为空，会去任务队列读取对应的任务，推⼊主线程执⾏。上述过程的不断重复就事件循环。上⾯的例⼦中， await 会同步代码执⾏完，再回到 async 函数中，再执⾏之前阻塞的代码阻塞下⾯的代码（即加⼊微任务队列），先执⾏ async 外⾯的同步代码，5. 最后⼀⾏直接打印 script end ，现在同步代码执⾏完了，开始执⾏微任务，即 await 下⾯的 代码，打印 async1 end。
事件循环：微任务和宏任务(一)
热门推荐
Front end development engineer
01-19 3万+
浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于 事件循环 的。 理解事件循环的工作方式对于代码优化很重要，有时对于正确的架构也很重要
js中事件循环之宏任务和微任务
mango
08-03 590
首先我们看一个例子： console.log("a"); setTimeout(()=>{ console.log("b"); },0); console.log("c"); Promise.resolve().then(()=>{ console.log("d")...
简述事件循环(event loop)、微任务、宏任务
Waifang
09-05 2118
简述事件循环（event loop）、宏任务、微任务首先明白以下几点：JS为什么是单线程的?JS为什么需要异步?JS单线程又是如何实现异步的呢?浏览器的多线程javaScript 的事件循环（event loop）宏任务微任务事件循环流程事件循环图示示例参考文章 首先明白以下几点： JS为什么是单线程的? js作为主要运行在浏览器的脚本语言，js主要用途之一是操作DOM。假如有两个线程，多线程的...
什么是事件循环，宏任务和微任务
05-25
事件循环是 JavaScript 运行时的一种机制，...当宏任务执行完毕后，事件循环会立即执行所有微任务，直到微任务队列为空为止，然后再从宏任务队列中取出下一个宏任务执行，这样可以优先处理微任务，保证及时更新 UI。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值