微任务与宏任务的区别

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


一. 什么是宏任务(MacroTask)


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


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


二. 什么是微任务(MicroTask)


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


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


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


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


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


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

 

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

 

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

 

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

 

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

相关文章
|
7月前
|
前端开发 JavaScript API
宏任务与微任务执行顺序及对比记录
宏任务与微任务执行顺序及对比记录
206 0
|
7月前
|
前端开发 JavaScript UED
|
前端开发 JavaScript
30 # 宏任务和微任务的区分
30 # 宏任务和微任务的区分
53 0
|
23天前
|
存储 前端开发 JavaScript
微任务和宏任务有什么区别
微任务和宏任务是JavaScript异步编程中的两个概念。宏任务包括整体代码块、setTimeout等,微任务有Promise、MutationObserver等。主要区别在于执行时机:每次事件循环中,宏任务只执行一个,而微任务会在当前宏任务结束后、下一个宏任务开始前全部执行完毕。
|
3月前
|
前端开发 JavaScript API
JavaScript 的宏任务和微任务有什么区别
【9月更文挑战第6天】JavaScript 的宏任务和微任务有什么区别
92 4
宏任务和微任务的执行顺序是怎样的
宏任务和微任务的执行顺序是怎样的
|
7月前
|
前端开发 JavaScript
微任务与宏任务
微任务与宏任务
36 1
|
7月前
|
前端开发 JavaScript UED
前端知识笔记(十)———宏任务和微任务
前端知识笔记(十)———宏任务和微任务
349 0
|
7月前
|
JavaScript 前端开发
前端 JS 经典:宏任务、微任务、事件循环(EventLoop)
前端 JS 经典:宏任务、微任务、事件循环(EventLoop)
66 0
|
7月前
|
JavaScript 前端开发 调度
(详解)js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?
(详解)js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?
120 1

热门文章

最新文章