老师，为什么这个setTimeOut在渲染前就执行了啊

Question

const p1 = document.createElement("p")
p1.innerText = 'p1'
const h = document.getElementById('h')
h.appendChild(p1)

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

还没渲染p1就alert了

Answer 1

双越 2023-08-10 08:06:10

此时 p1 已经在 DOM 结构中存在了，只是还没被浏览器“画”出来（人眼看到）

• 提问者 throwError_ #1

  老师，我还是没明白，不是说宏任务在渲染之后执行吗，那页面应该画出来了呀。宏任务或微任务执行前DOM结构应该都更新了吧，如果加一个promise，确实会在页面没画出来的时候先执行promise，画出来后再执行setTimeOut；只写setTimeOut却还没画出来就执行了。我的理解画出来就是DOM渲染的意思，我是不是理解错了