了解EventLoop ​

前端开发，基本都知道EventLoop。自己写一下流程，复习下

其实就是js代码的执行逻辑 执行机制

js 是单线程

进程 & 线程 ​

因为一个页面的产生和交互有着很多的工作，不会放到一个人身上，所以针对不同的工作就出现了多个线程去干活。

一个浏览器标签页其实就是一个进程,一个工厂车间

• 标签页进程 包含:
  • GPU 渲染线程
  • JS 引擎线程
  • 元素监听线程
  • 网络请求线程(最多5~7个)
  • ...

JS的执行有同步的也有异步

• 同步
  • 上一步未完成
  • 下一步不会开始执行
• 异步
  • 上一步说了执行
  • 下一步跟着执行

针对异步的任务，分出了两种，分别是宏任务和微任务。

• 宏任务
  • ajax请求
  • setTimeout serInterval
  • 等等
• 微任务
  • queueMicrotask
  • Promise.then catch finally
  • process.nextick (node)
  • 等等

demo ​

先来一个index.js

// ----------1------------
console.log(1);
// ----------------------


// ----------2------------
setTimeout(()=>{
    console.log(2);
},0)
// ----------------------

// ----------3------------
console.log(3);
// ----------------------


new Promise((resolve)=>{
// ----------4------------
    console.log(4);
    resolve(null)
// ----------------------

}).then(()=>{
// ----------5------------
    console.log(5);
// ----------------------

})

// ----------6------------
console.log(6);
// ----------------------

• 将代码内容都做了注释，分成了块，一步一步来看流程哈
• 1
  • 这是一个同步任务 直接执行
• 2
  • 这是一个宏任务，放入到 webapi队列，监听时间到了后 放入宏任务任务执行队列
• 3
  • 这是一个同步任务 直接执行
• 4
  • 这是一个同步任务 直接执行 看内容是在Promise 内容，但是是同步执行的
• 5
  • Promise.then,这是一个微任务,放入到 webapi队列 ,监听到4触发resolve 后， 放入微任务执行队列
• 6
  • 这是一个同步任务 直接执行

同步任务下的执行：1346

微任务执行队列里有一个5,微任务是vip，优先级级别高，微任务执行完后，才是宏任务。

后面的顺序是：52

疑问，await 的情况呢？ ​

async function run(){
    console.log(1);
    await Promise.resolve(null);
// ----------await的后面------------
    console.log(2);
// ----------------------
}

console.log(3);

run();

console.log(4);

思考一下执行顺序。

简单一句话，await后面的视为微任务

同步任务完成后，微任务执行。