宏任务和微任务

宏任务

消息队列中的等待被主线程执行的任务（通过事件循环系统来执行）

时间粒度较大，执行的时间间隔不能精准控制，对一些高实时性的需求不太符合

微任务

一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前

• 通过异步操作解决了同步操作的性能问题
• 通过微任务解决了实时性的问题

  Promise

  

  Promise 与微任务

  ```javascript function Bromise(executor) { var onResolve = null var onReject = null //模拟实现resolve和then，暂不支持rejcet this.then = function (onResolve, onReject) {

    onResolve_ = onResolve

  }; // 执行 then() 方法传进来的 onResolve() 函数 function resolve(value) {

    // 这里使用定时器延后执行 onResolve_ 函数
    // 避免在 Bromise.then 还没执行时就调用 onResolve_
    // 真实的 Promise 使用微任务来延迟 onResolve_ 执行
      setTimeout(()=>{
        onResolve_(value)
       },0)

  } executor(resolve, null); }

function executor(resolve, reject) { resolve(100) } //将Promise改成我们自己的Bromsie let demo = new Bromise(executor)

function onResolve(value){ console.log(value) } demo.then(onResolve)

// Promise 中的 resolve 函数其实就是执行了 then() 方法中传进来的 onResolve() 函数， // 但是用户调用 resolve() 往往是在构造函数的参数 execute() 函数中， // 而构造函数执行时，onResolve 函数还没被赋值。 // 因此在 resolve() 中执行 onResolve() 函数的代码需要用一个微任务来执行。

<a name="nEqBe"></a>
# async/await
> 提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力
```javascript
async function foo(){
  try{
    let response1 = await fetch('https://www.geekbang.org')
    console.log('response1')
    console.log(response1)
    let response2 = await fetch('https://www.geekbang.org/test')
    console.log('response2')
    console.log(response2)
  }catch(err) {
       console.error(err)
  }
}
foo()

背后技术构成

Promise（微任务） + 生成器应用（协程应用）

async function foo() {
    console.log(1)
    let a = await 100
    console.log(a)
    console.log(2)
}
console.log(0)
foo()
console.log(3)

• 一个线程可以拥有多个协程，但是在线程上同时只能执行一个协程

参考资料

1. 浏览器工作原理与实践 —— 李兵
2. 图解 Google V8