2回答

双越

2019-06-12

先补充了一段微任务和宏任务的区别，后续我会重新整理并以合适的形式发出来。有问题可以随时回复我。

0

0

双越

2019-06-12

微任务和宏任务

介绍

// demo

function test() {    console.log('start'),
   setTimeout(() => {        console.log('setTimeout 1')
   })
   setTimeout(() => {        console.log('setTimeout 2')
   })    Promise.resolve().then(() => {        console.log('promise 1')
   }).then(() => {        console.log('promise 2')
   })    console.log('end')
}
test()

• 宏任务：setTimeout setInterval DOM 事件

• 微任务：Promise（对于前端来说）

• 微任务比宏任务执行的更早

event loop 和 DOM 渲染

• 先回顾 event loop 的过程

• 每一次 call stack 结束，都会触发 DOM 渲染

• 然后再进行 event loop

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 渲染')

宏任务和微任务的区别

• 宏任务：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}`)
})

总结

• 微任务和宏任务的介绍

• 微任务会更早被执行

0

0