什么是宏任务 / 微任务

  • 宏任务：setTimeout, setInterval, Ajax, DOM 事件
  • 微任务：Promise async / await
  • 微任务执行时机要比宏任务早
  1. console.log(100)
  3. // 宏任务
  4. setTimeout(() => {
  5.     console.log(200)
  6. })
  8. // 微任务
  9. Promise.resolve().then(() => {
  10.     console.log(300)
  11. })
  13. console.log(400)
  15. // 100
  16. // 400
  17. // 300 微任务 【微】任务比【宏】任务执行时机【早】
  18. // 200 宏任务

event loop 和 DOM 渲染

  • 在回归一次 event loop 的过程
  • js 是单线程的，而且和 DOM 渲染公用一个线程
  • js执行时，得留一些时机给 DOM 渲染

image.png

  1. const $p1 = $('<p>ppppppp 1</p>')
  2. const $p2 = $('<p>ppppppp 2</p>')
  3. const $p3 = $('<p>ppppppp 3</p>')
  5. $('#container')
  6.     .append($p1)
  7.     .append($p2)
  8.     .append($p3)
  9. // 此时页面还未触发 DOM 渲染，等待 js 全部执行完后在触发 DOM 渲染
  11. console.log('length', $('#container').children().length)    // 3：此时页面虽然未渲染，但内存中保存了数据
  12. // alert 会阻断 js 执行， 也会阻断 DOM 渲染， 便于查看效果
  13. alert('本次 call stack 结束， DOM 结构已更新，但尚未触发渲染')

宏任务和微任务区别

  • 宏任务：在DOM 渲染后触发， 如 setTimeout
  • 微任务：在DOM 渲染前触发， 如 Promise ```javascript const $p1 = $(‘

    ppppppp 1

    ‘) const $p2 = $(‘

    ppppppp 2

    ‘) const $p3 = $(‘

    ppppppp 3

    ‘)

$(‘#container’) .append($p1) .append($p2) .append($p3) // 此时页面还未触发 DOM 渲染，等待 js 全部执行完后在触发 DOM 渲染

// 微任务：在DOM 渲染前触发 Promise.resolve().then(() => { console.log(‘length’, $(‘#container’).children().length) // 3：此时页面虽然未渲染，但内存中保存了数据 // alert 会阻断 js 执行， 也会阻断 DOM 渲染， 便于查看效果 alert(‘Promise then’) // DOM未渲染 })

// 宏任务：在DOM 渲染后触发 setTimeout(() => { console.log(‘length’, $(‘#container’).children().length) // 3：此时页面虽然未渲染，但内存中保存了数据 // alert 会阻断 js 执行， 也会阻断 DOM 渲染， 便于查看效果 alert(‘setTimeout’) // DOM渲染了 })

```

为何 微任务 比宏任务 执行要早

  • 微任务是ES6语法规定的
  • 宏任务是浏览器规定的

image.png
image.png