JS异步相关

1 同步异步

1.1 概念

同步：在主线程上执行的任务，前面任务执行完后面才能执行，会阻塞代码执行。

异步：委托给宿主环境执行，异步任务执行完会通知主线程执行异步任务的回调函数，不会阻塞代码执行。

    // 同步回调
    const arr = [1, 2, 3]
    arr.forEach((item, index) => {
      console.log('遍历的回调', item, index)//先执行
    })
    console.log('forEach()之后')//后执行
    // 异步回调
    setTimeout(() => {
      console.log('回调函数')//后执行
    }, 0)
    console.log('setTimeout()之后')//先执行

1.2 异步场景

网络请求/图片加载/定时任务

2 宏任务微任务

2.1 定义

宏任务：异步ajax/setTimeout/文件操作/DOM事件

微任务：Promise

2.2 执行顺序

先执行微任务，再执行宏任务

3 event loop

3.1 原理

event loop：异步基于回调来实现，event loop就是异步回调的实现原理。先执行同步代码，再执行队列里的异步代码。先执行微队列，再执行宏队列。

为什么微任务早？

微任务在DOM渲染前触发，JS 引擎来统一处理。

宏任务在DOM渲染后触发，浏览器（或 nodejs）干预处理。

// 修改 DOM
const $p1 = $('<p>一段文字</p>')
const $p2 = $('<p>一段文字</p>')
const $p3 = $('<p>一段文字</p>')
$('#container')
    .append($p1)
    .append($p2)
    .append($p3)

// 微任务：渲染之前执行（DOM 结构未更新）
Promise.resolve().then(() => {
    const length = $('#container').children().length
    alert(`micro task ${length}`)
})

// 宏任务：渲染之后执行（DOM 结构已更新）
setTimeout(() => {
    const length = $('#container').children().length
    alert(`macro task ${length}`)
})

3.2 流程

// console.log(100)
// setTimeout(() => {
//     console.log(200)
// }, 1000)
// console.log(300)

同步代码，一行一行放在call stack执行（执行完100清空调用栈）

异步代码setTimeout，先记录到web api

时机到了，移动到回调队列（200到时间后放到队列）

如call stack为空（同步代码执行完：执行完300清空调用栈），event loop开始工作

轮询查找回调队列，如有移动到call stack中执行（200执行完清空），然后继续轮询查找

3.3 event loop和DOM渲染

js是单线程，js执行和DOM渲染共用一个线程。同步任务执行完，进行DOM渲染，然后触发event loop。（2-3轮询）