为何alert弹窗先于页面内容显示？我的JavaScript执行理解误区

你提到的误区核心是把HTML解析顺序和页面渲染时机混在一起了，我来给你拆解清楚：

首先，你说的「HTML自上而下解析」是对的，但浏览器在解析过程中遇到<script>标签时，会触发一个关键行为：暂停HTML的解析和页面渲染，优先执行脚本代码。这是因为早期JavaScript经常需要操作当前已经解析好的DOM元素，浏览器为了保证脚本能拿到正确的DOM状态，会阻塞后续的解析和渲染流程，直到脚本执行完毕。

放到你的代码里，执行流程是这样的：

• 浏览器解析到<p>This is paragraph 1</p>，把这个段落元素加入了DOM树，但此时还没来得及把它渲染到页面上（渲染是需要时间的，而且脚本阻塞了这个过程）。
• 紧接着遇到<script>标签，浏览器立刻停下解析HTML的工作，开始执行alert("First Script Block")。
• alert()是一个完全阻塞浏览器的调用——它会暂停所有任务（包括渲染、后续解析），直到你点击弹窗的「确定」按钮。
• 当你关闭弹窗后，脚本执行完毕，浏览器才会继续解析后面的HTML，同时把之前解析好的第一个段落渲染到页面上，然后重复这个流程处理后面的段落和脚本。

那如果想实现「先显示段落，再弹出alert」的效果，你可以让脚本等待DOM解析完成、页面渲染就绪后再执行，比如用DOMContentLoaded事件：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example Page</title>
</head>
<body>
  <p>This is paragraph 1</p>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      alert("First Script Block");
    });
  </script>
  <p>This is paragraph 2</p>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      alert("Second Script Block");
    });
  </script>
  <p>This is paragraph 3</p>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      alert("Third Script Block");
    });
  </script>
</body>
</html>

这样所有脚本都会等到整个DOM解析完成、页面内容都渲染出来后才依次执行alert，就能符合你的预期了。

内容的提问来源于stack exchange，提问作者seeker