Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

宏任务和微任务是指什么? #939

Open
pwstrick opened this issue Apr 17, 2020 · 2 comments
Open

宏任务和微任务是指什么? #939

pwstrick opened this issue Apr 17, 2020 · 2 comments
Labels
JavaScript JavaScript类的题目

Comments

@pwstrick
Copy link
Owner

宏任务和微任务是指什么?

@pwstrick pwstrick added the JavaScript JavaScript类的题目 label Apr 17, 2020
@pwstrick
Copy link
Owner Author

pwstrick commented Apr 17, 2020

宏任务和微任务皆为异步任务,它们都属于一个队列,主要区别在于他们的执行顺序。
1

  1. 宏任务:整体代码script,setTimeout,setInterval、setImmediate。
  2. 微任务:原生Promise(有些实现的promise将then方法放到了宏任务中)、process.nextTick、Object.observe(已废弃)、 MutationObserver。

参考资料《JS事件循环机制(event loop)之宏任务/微任务

@pwstrick
Copy link
Owner Author

pwstrick commented Aug 14, 2020

消息队列中的任务称为宏任务,每个宏任务中都包含了一个微任务队列,等宏任务中的主要功能都执行完成之后,这时候,渲染引擎并不着急去执行下一个宏任务,而是执行当前宏任务中的微任务。

1)宏任务
页面中的大部分任务都是在主线程上执行的,把这些消息队列中的任务称为宏任务,它们包括:

  1. 渲染事件(如解析 DOM、计算布局、绘制);
  2. 用户交互事件(如鼠标点击、滚动页面、放大缩小等);
  3. JavaScript 脚本执行事件;
  4. 网络请求完成、文件读写完成事件。

宏任务的时间粒度比较大,执行的时间间隔是不能精确控制的,对一些高实时性的需求就不太符合了,比如监听 DOM 变化的需求。

2)微任务
微任务就是一个需要异步执行的函数,执行时机是在主函数执行结束之后、当前宏任务结束之前。也就是说每个宏任务都关联了一个微任务队列。
当 JavaScript 执行一段脚本的时候,V8 会为其创建一个全局执行上下文,在创建全局执行上下文的同时,V8 引擎也会在内部创建一个微任务队列。
在现代浏览器里面,产生微任务有两种方式。

  1. 第一种方式是使用 MutationObserver 监控某个 DOM 节点,然后再通过 JavaScript 来修改这个节点,或者为这个节点添加、删除部分子节点,当 DOM 节点发生变化时,就会产生 DOM 变化记录的微任务。
  2. 第二种方式是使用 Promise,当调用 Promise.resolve() 或者 Promise.reject() 的时候,也会产生微任务。

通常情况下,在当前宏任务中的 JavaScript 快执行完成时,也就在 JavaScript 引擎准备退出全局执行上下文并清空调用栈的时候,JavaScript 引擎会检查全局执行上下文中的微任务队列,然后按照顺序执行队列中的微任务。
在执行微任务过程中产生的新的微任务并不会推迟到下个宏任务中执行,而是在当前的宏任务中继续执行。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
JavaScript JavaScript类的题目
Projects
None yet
Development

No branches or pull requests

1 participant