【小白鲨笔记】js面试题（三）

三、Js执行机制：宏任务vs微任务

Js是一个单线程的语言，同一时间只能做一件事情，因此需要将任务进行排序：异步执行机制。

Js执行流程：

1. 同步任务

2. 异步任务/事件循环：Event-Loop

   • 微任务：只有同步任务执行完了才能执行（promise.then.catch）

     ❗注意：只有then和catch才是微任务，new Promise是同步任务

   • 宏任务：只有微任务都执行了才能执行（setTimeout、xhr…）

setTimeout(function(){ console.log(1) }) //宏任务
new Promise((resolve) => {
    console.log(2) //同步任务
    resolve()
}).then(() => { console.log(3) }) //微任务
console.log(4) //同步任务
// 输出顺序：2，4，3，1

总结js执行机制

1. 执行顺序：同步任务（执行栈） -> 事件循环（微任务先于宏任务）

2. 微任务：由js引擎发起的任务

   1. Promise.then/catch/finally

   2. process.nextTick

   3. MutationObserver

   4. object.observe

3. 宏任务：宿主（浏览器/node）发起的任务

   1. script整体代码：UI rendering、requestAnimationFrame

   2. DOM事件：setTimeout、setInterval、setImmediate

   3. ajax请求

   4. I/O