非同步機制

非同步仍是必要的- 畫面凍結的問題

https://codesandbox.io/s/ui-blocking-r354l

小試身手

• Task(Macrotask): setTimeout, requestAnimation …
• Microtask: Promise.then, process.nextTick …

setTimeout(() => {
  console.log('setTimeout')
})
 
new Promise(resolve => {
  console.log('promise executor')
  resolve()
})
  .then(() => {
    console.log('promise then')
  })
 
console.log('main')

總結

• 兩種不同的執行隊列: microtask queue、macrotask queue
• 瀏覽器會在下個 macrotask 執行前, 重新渲染 UI
• 升級 node 到 major 11 版本以上

Q&A

歡迎來到真實世界

請寫出以下印出 0~9 的順序

async function async1() {
  new Promise(async resolve => {
    Promise.resolve()
      .then(() => {
        console.log(0)
        resolve()
      })
  })
    .then(() => {
      console.log(1)
    })
  await async2()
  console.log(2)
}
async function async2() {
  async3()
  console.log(3)
}
function async3() {
  new Promise((resolve) => resolve())
    .then(() => {
      console.log(4)
    })
  Promise.resolve()
    .then(() => {
      console.log(5)
    })
}
 
async1()
 
setTimeout(function() {
  console.log(6)
}, 0)
 
new Promise(resolve => {
  console.log(7)
  resolve()
})
  .then(function() {
    console.log(8)
  })
  .then(function() {
    console.log(9)
  })

其他挑戰

• 螞蟻金服面試題

參考來源、圖片來源

• HTML spec.: Event loop processing model
• Use reject instead of throw - you cannot use throw asynchronously
• Tasks, Microtasks and Schedules
• 掘金: 微任務、宏任務與Event-Loop
• https://www.uniqlo.com/