Event Loop

214 阅读2分钟

事件队列

Javascript是单线程,单线程就意味着所有任务需要排队。然后会将所有任务分成两类:同步任务和异步任务!同步任务:在主线程上执行的任务,只有前一个任务执行完成,才会执行后一个!异步任务:不进入主线程、而进入“任务队列”的任务,当主线程上的任务执行完,主线程才会去执行“任务队列”。

只有一个main thread主线程,主线程执行完call-stack执行栈的任务后去检查异步的任务队列,如果异步事件触发,则将其加到主线程的执行栈。

执行顺序

主线程 ——> promise.nextick ——> promise.then ——> async ——> setTimeout ——> setInterval ——> setImmediate ——> I/O ——>> UI rendering

宏任务: 整体代码script  setTimeout  setInterval setImmediate(浏览器仅IE10支持) I/O操作 UI渲染
微任务: promise.then(非new Promise()) process.nextTick(node中) MutationObserver

promise实例化是主线程执行
await 相当于 new Promise()
async 是多个异步操作的promise对象,相当于then
process.nextTick在当前同步任务最后,异步任务之前
setImmediate用来操作耗时任务
async function async1() {
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2 end')
}
async1()

//transfer
new Promise((resolve, reject) => {
  console.log('async2 end')
  // Promise.resolve() 将代码插入微任务队列尾部
  // resolve 再次插入微任务队列尾部
  resolve(Promise.resolve())
}).then(() => {
  console.log('async1 end')
})

图解执行

当javascript代码执行的时候会将不同的变量存于内存中的不同位置:堆(heap)和栈(stack)中来加以区分,heap中一般存储我们的变量,stack一般存储函数或者方法。stack叫做执行栈,我们的方法依次会在这里执行。执行栈事件先进后出,任务队列先进先出。web apis则是代表一些异步事件,而callback queue即事件队列。

实现异步

  1. 回调函数
  2. 事件监听
  3. 发布/订阅
  4. Promise 对象
  5. generrator