微任务和宏任务

99 阅读1分钟

微任务和宏任务有哪些

  • 宏任务:setTimeOut,setInterval,Ajax,DOM事件
  • 微任务:promise,async/await

微任务比宏任务执行时机早

例如:


console.log(100)

setTimeout(() => {
    console.log(200)
})

Promise.resolve().then(() => {
    console.log(300)
})

console.log(400)

结果:
// 100 400 300 200

为什么微任务比宏任务执行时机早?

首先需要去了解下eventLoop和DOM渲染

  1. call stack空闲(同步代码执行完毕)或者call stack清空(每次轮询结束)
  2. 尝试渲染 DOM( 不一定非得渲染,就是给一次 DOM 渲染的机会!!! )
  3. 触发 event-loop

image.png

代码示例:

const $p1 = $('<p>一段文字</p>')
const $p2 = $('<p>一段文字</p>')
const $p3 = $('<p>一段文字</p>')
$('#container')
            .append($p1)
            .append($p2)
            .append($p3)

console.log('length',  $('#container').children().length )
alert('本次 call stack 结束,DOM 结构已更新,但尚未触发渲染')
// (alert 会阻断 js 执行,也会阻断 DOM 渲染,便于查看效果)
// 到此,即本次 call stack 结束后(同步任务都执行完了),浏览器会自动触发渲染,不用代码干预

// 另外,按照 event loop 触发 DOM 渲染时机,setTimeout 时 alert ,就能看到 DOM 渲染后的结果了
setTimeout(function () {
    alert('setTimeout 是在下一次 Call Stack ,就能看到 DOM 渲染出来的结果了')
})

结果:

  • 首先可以看到,container.children的长度为3,但是页面上还没有渲染。

image.png

-DOM渲染了,setTimeOUt也执行了

image.png

宏任务和微任务的区别

  • 宏任务DOM 渲染后再触发
  • 微任务DOM 渲染前会触发
// 修改 DOM
const $p1 = $('<p>一段文字</p>')
const $p2 = $('<p>一段文字</p>')
const $p3 = $('<p>一段文字</p>')
$('#container')
    .append($p1)
    .append($p2)
    .append($p3)

 // 微任务:渲染之前执行(DOM 结构已更新)
 Promise.resolve().then(() => {
     const length = $('#container').children().length
     alert(`micro task ${length}`)
 })

// 宏任务:渲染之后执行(DOM 结构已更新)
setTimeout(() => {
    const length = $('#container').children().length
    alert(`macro task ${length}`)
})
  • 先执行了微任务:Promise

image.png

-DOM渲染之后,执行了宏任务 setTimeout

image.png

再深入思考一下:为何两者会有以上区别,一个在渲染前,一个在渲染后?

这是因为:

  • 微任务:ES 语法标准之内,JS 引擎来统一处理。即,不用浏览器有任何关于,即可一次性处理完,更快更及时。

  • 宏任务:ES 语法没有,JS 引擎不处理,浏览器(或 nodejs)干预处理。

总结

微任务,宏任务,DOM渲染,在Event-loop里的关系:

  1. 先执行同步代码,知道call stack 空闲
  2. 执行micro task queue(微任务队列)里面的事件
  3. 尝试DOM渲染
  4. 触发event-loop 执行callBack queue队列里面的事件