Event Loop 的粗浅认识

event loop 原理的理解

代码实验1:

console.log(100)
setTimeout(() => {
    console.log(200)
})
Promise.resolve().then(() => {
    console.log(300)
})
console.log(400)
// 100 400 300 200

代码实验2：

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

console.log('length',  \$('#container').children().length )

// 另外，按照 event loop 触发 DOM 渲染时机，setTimeout 时 alert ，就能看到 DOM 渲染后的结果了
setTimeout(function () {
alert('setTimeout 是在下一次 Call Stack ，就能看到 DOM 渲染出来的结果了')
})

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

Promise.resolve().then(() => {
const length = $('#container').children().length
    alert(`微任务2长度， ${length}\`)
})

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

// （alert 会阻断 js 执行，也会阻断 DOM 渲染，便于查看效果）
// 到此，即本次 call stack 结束后（同步任务都执行完了）
alert('同步任务完成')

渲染前将微任务队列中的任务放入call stack中进行执行

渲染结束后，即三段文字出现后，将已经进入宏任务队列的任务放入call stack中进行执行

宏任务也看前后顺序