微任务与宏任务的区别

简介: 微任务与宏任务的区别


一. 什么是宏任务(MacroTask)


宏任务包括:setTimeout setInterval Ajax DOM事件,


宏任务是由宿主(浏览器、Node)发起的,宏任务,可以理解为每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行).进程的切换肯定是宏任务,因为需要花费大量的资源


二. 什么是微任务(MicroTask)


微任务包括:Promise async/await 等…


微任务是由JS引擎发起的,微任务,可以理解是在当前 task 执行结束后立即执行的任务。也就是说,在当前task任务后,下一个task之前,在渲染之前。线程的切换是微任务,因为只需要在同一个进程中切换就可以了


三. 宏任务和微任务是怎么执行的?


执行顺序:主线程 >主线程上创建的微任务 > 主线程上创建的宏任务


在事件循环中,每进行一次循环操作称为 tick,每一次 tick 的任务处理模型是比较复杂的,但关键步骤如下:


1. 执行一个宏任务(栈中没有就从事件队列中获取)

 

2. 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中

 

3. 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)

 

4. 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染

 

5. 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)

相关文章
|
3月前
|
XML 前端开发 JavaScript
2025 年最新 CSS 面试题 100 道及详细答案解析
本文整理了100道CSS面试题及答案,涵盖基础概念、选择器与特性、布局(如Flexbox和Grid)、动画与过渡、响应式设计等核心内容。从CSS的基础知识如盒模型、`box-sizing`属性,到高级应用如伪类选择器(LVHA、CSS3新增伪类)和视觉格式化模型(BFC),帮助开发者系统掌握CSS技能。此外,还涉及浏览器兼容性、CSS优化及预处理器等内容,为前端工程师提供全面的学习资源。资源可从[此链接](https://pan.quark.cn/s/50438c9ee7c0)获取。
359 5
|
6月前
|
网络安全
一个简单的网站建设需要多少费用?
网站建设费用因类型、功能和需求的不同而差异较大,包括基础型网站、设计和定制网站、功能型与电商网站、域名费用、服务器费用、HTTPS认证费用、网站维护费用等,其中独立站建设费用相对较高。
311 3
|
JavaScript
【Vue面试题十五】、说说你对slot的理解?slot使用场景有哪些?
这篇文章深入探讨了Vue中的`slot`概念,包括它的定义、使用场景和分类(默认插槽、具名插槽和作用域插槽),并通过代码示例展示了如何在组件中使用插槽来实现内容的分发和自定义。同时,文章还对插槽的工作原理进行了分析,解释了`renderSlot`函数和`$scopedSlots`对象的角色。
【Vue面试题十五】、说说你对slot的理解?slot使用场景有哪些?
|
8月前
|
NoSQL 算法 Java
Java Redis多限流
通过本文的介绍,我们详细讲解了如何在Java中使用Redis实现三种不同的限流策略:固定窗口限流、滑动窗口限流和令牌桶算法。每种限流策略都有其适用的场景和特点,根据具体需求选择合适的限流策略可以有效保护系统资源和提高服务的稳定性。
185 18
|
Kubernetes 监控 Cloud Native
云原生入门:从传统应用到容器化部署的旅程
【9月更文挑战第19天】在数字化浪潮中,企业正迅速将目光投向云原生技术,以实现更快的应用开发和更灵活的资源管理。本文将通过一个简单示例引导读者理解如何将传统应用转变为云原生应用,并部署至云端。我们将探索容器化技术的基础,以及它如何帮助企业解锁现代软件交付的速度和效率。准备好让你的应用乘上云原生的快车了吗?让我们开始这段令人兴奋的旅程吧!
138 11
ly~
|
11月前
|
消息中间件 存储 数据库连接
RocketMQ 消息的重试机制是怎样的?
RocketMQ的消息重试机制确保消息消费失败时能自动重试,直至成功。默认重试16次,时间间隔逐次翻倍,从10秒至数分钟不等。重试在同组内不同消费者间进行,由异常抛出或特定状态返回触发。支持自定义重试次数与时间间隔,建议合理配置避免无限重试,保障系统稳定性和性能。
ly~
3428 2
|
11月前
|
存储 缓存 JavaScript
闭包有什么应用场景呢
【10月更文挑战第12天】闭包有什么应用场景呢
|
缓存 监控 JavaScript
【Vue面试题二十六】、SSR解决了什么问题?有做过SSR吗?你是怎么做的?
这篇文章详细介绍了服务端渲染(SSR)的原理、解决了哪些问题、以及如何在Vue应用中实现SSR,包括项目配置、代码结构、路由配置、数据预取和服务器端的渲染流程。
【Vue面试题二十六】、SSR解决了什么问题?有做过SSR吗?你是怎么做的?
|
缓存 IDE Java
IntelliJ IDEA 2023.1 正式发布,看看又多了那些神仙功能..
IntelliJ IDEA 2023.1 正式发布,看看又多了那些神仙功能..
169 0
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
719 7