为啥我setTimeout里的alert出来后页面还是没有渲染出来呢？

来源：5-9 -浏览器和nodejs事件循环（Event Loop）有什么区别-浏览器

Candy3610866

2022-05-30

如下图， setTimeout里的alert出来后，页面仍然没有渲染出来。
图片描述

只有当alert点完确定后，页面才渲染：

图片描述
和浏览器版本版本有关系吗，当前版本：

代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const p = document.createElement("p")
    p.innerHTML = "一些文字"
    document.body.appendChild(p)
    const list = document.getElementsByTagName("P")
    console.log("len:", list.length)

    console.log("start")
    setTimeout(() => {
      const list = document.getElementsByTagName("P")
      console.log("setTimeout len:", list.length)
      alert("阻塞 timeout")
    })

    Promise.resolve().then(() => {
      const list = document.getElementsByTagName("P")
      console.log("promise len:", list.length)
      alert("阻塞 promise")
    })
    console.log("end")

  </script>

</body>

</html>