美文网首页
# 宏任务和微任务

# 宏任务和微任务

作者: 人话博客 | 来源:发表于2021-07-19 09:06 被阅读0次

首先说明

  1. 首先在JavaScript中,有同步代码和异步代码.这点很清晰.
  2. 代码的执行优先级顺序是,同步代码执行优先级最高,只用等同步代码执行完毕之后,才会执行异步代码.这点也很清晰.
  3. 上面说的宏任务和微任务都全部都是异步代码.
  4. 所以,在谈论宏任务和微任务时,就是在谈论异步代码.

所谓的宏任务和微任务

  1. 宏任务:比如定时器(setTimeout,setTimeInterval), DOM元素的事件(比如按钮点击). 这些都属于宏任务.
  2. 微任务: Promise相关的任务就叫微任务.

可以这么简单理解,除了Promise相关,其他的丢在Event-Loop里的都叫宏任务.

执行原则.

请看下面这段代码:

function app() {
  setTimeout(() => {
    console.log('A')
    Promise.resolve().then(() => {
      console.log('B')
    })
  })
  console.log('C')
  Promise.resolve().then(() => {
    console.log('D')
    Promise.resolve().then(() => {
      console.log('F')
      setTimeout(() => {
        console.log('E')
      })
    })
  })
}

上述代码的输出顺序会是什么呢?

先给出几个原则:

  1. 执行第一原则:所以的js代码顺序逻辑是:先执行完同步代码,等同步代码执行完毕之后,才会去执行EventLoop里的异步代码.

  2. 执行第二原则: 同一层级下,微任务执行的优先级永远大于宏任务.

  3. 在同层级下,当微任务中,包含微任务时,除非等当前微任务全部调用完毕,否则,同级下的宏任务将无法执行.

代码分析:

  1. 当程序执行到: console.log('C') 时,即表明全局的同步代码已经执行完毕,开始执行异步代码(也就是宏微任务.) 输出 C

  2. 现在上下的运行代码都在 EventLoop 中,根据上述原则同级下,微任务永远大于宏任务执行. 所以先执行Promise.resolve().then(() => { console.log('D'). 输出 D.

  3. 由于代码下面还有一个微任务,根据上述第三点原则,继续执行微任务 Promise.resolve().then(()=>{console.log('F')}) 输出 F.

  4. 此时,同级微任务执行完毕, 在执行 setTimeout(()=>{ console.log('A') 在输出 A.

  5. 同级下,微任务永远大于宏任务执行 仍然是这个原则,所以先执行 Promise.resolve().then(()=>{console.log('B') 输出 B 最后输出 E.

最后的输出结果是: [C] [D] [F] [A] [B] [E]

相关文章

  • 微任务和宏任务@小四@王云飞

    微任务和宏任务 微任务 和 宏任务 表示异步任务的两种分类。 微任务(microtask)和宏任务(macrota...

  • 宏任务和微任务

    [js 宏任务和微任务] .宏任务(macrotask )和微任务(microtask ) macrotask 和...

  • 宏任务 和 微任务

    宏任务: 当前调用栈执行的代码成为宏任务,(主代码块和定时器)也或者宿主环境提供的叫宏任务 这些任务包括: 渲染事...

  • 宏任务和微任务

    介绍这个之前, 建议先了解一下事件循环[https://www.jianshu.com/p/106867eee55...

  • 宏任务和微任务

    浏览器是多线程执行代码,渲染的。但是浏览器只给JS一个线程来执行,因此JS是单线程。因此代码都是同步执行的,但是J...

  • # 宏任务和微任务

    首先说明 首先在JavaScript中,有同步代码和异步代码.这点很清晰. 代码的执行优先级顺序是,同步代码执行优...

  • 微任务和宏任务

    JS是单线程的,可以把这个线程叫做主线程,主线程中包含宏任务队列和微任务队列,宏任务所在的队列就叫宏任务队列,微任...

  • 宏任务和微任务

    所谓微任务和宏任务 宏任务::常见的定时器,用户交互事件等等。可以理解是每次执行栈执行的代码就是一个宏任务。(宏任...

  • 2018-08-15 微任务 宏任务 MicroTask Mac

    微任务和宏任务 微任务(Microtask)宏任务(Microtask)process.nextTickPromi...

  • 浏览器的事件机制-Eventloop

    循环机制前,我们先要会区分:宏任务与微任务 宏任务Task与微任务Microtask JS中的宏任务和微任务的区别...

网友评论

      本文标题:# 宏任务和微任务

      本文链接:https://www.haomeiwen.com/subject/fdrcmltx.html