咨询：HTML中h1标签后script先执行alert的原因

这是个非常典型的浏览器渲染与JavaScript执行顺序问题，我来给你拆解清楚：

核心原因：浏览器的同步解析规则 + alert的阻塞特性 #

浏览器处理HTML页面是从上到下同步执行的，但有个核心规则：当遇到<script>标签时，会立刻暂停当前的DOM解析和页面渲染流程，优先执行脚本中的代码。

• 这么设计的原因很直接：JavaScript可以直接操作DOM（比如修改、删除刚解析的元素），浏览器必须保证脚本执行时，前面的DOM已经准备就绪；同时暂停渲染，避免脚本执行期间页面状态出现混乱。

你的代码执行步骤拆解 #

先看你的原代码：

<body> 
  <h1>Javascript in HTML</h1> 
  <script> 
    if(4+3 === 7) { 
      alert("you are smart"); 
    } 
  </script> 
</body>

执行流程是这样的：

1. 浏览器解析到<h1>标签，将其添加到DOM树中，但还没有进行渲染绘制（也就是还没把文字显示到屏幕上）。
2. 紧接着遇到<script>标签，浏览器立刻暂停所有渲染工作，切换到执行JS代码：
   • 判断4+3 === 7为真，调用alert("you are smart")。
   • alert()是阻塞式弹窗：它会完全卡住浏览器的主线程，直到你点击关闭按钮。在这个过程中，浏览器根本没机会完成h1的渲染绘制。
3. 当你关闭alert弹窗后，浏览器才会恢复被打断的流程：完成剩余的DOM解析（这里已经没有后续内容了），然后构建渲染树、计算布局、绘制页面，这时候h1的内容才会显示出来。

所以就出现了你看到的“先弹alert，再显示h1”的反直觉现象～

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