script标签与HTML代码执行优先级疑问：alert为何先于span渲染？

先看测试代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    
    <span>1111</span>
    
    <script>
      alert("1");
    </script>
    
    <span>22222</span>
    
    <script>
      alert("2");
    </script>
    
      <span>Hello World</span>
     <script>
       alert("Hello World");
     </script>
      
  </body>
</html>

按代码顺序，每个<span>都在<script>之前，但实际运行时，alert弹窗先弹出，关闭后才看到对应的span内容。原因在于浏览器的HTML解析与执行逻辑：

• 浏览器是逐行从上到下解析HTML的，但一旦遇到<script>标签，会立即暂停后续的HTML解析和页面渲染流程，优先执行该脚本内的代码。
• 当解析到第一个<span>1111</span>时，浏览器只是将这个元素加入DOM树，但并未立刻渲染到屏幕上——渲染操作并非实时触发，通常会在浏览器空闲时段或脚本执行完成后才进行。
• 紧接着遇到<script>，浏览器立刻执行其中的alert("1")。alert()是完全阻塞式的，会暂停浏览器所有线程（包括渲染线程），直到你点击弹窗的确定按钮。
• 只有关闭alert弹窗后，浏览器才会继续后续流程：完成之前span的渲染，然后解析下一个<span>，再遇到下一个<script>时重复上述过程。

直白点说：脚本执行会打断渲染流程，而alert会彻底卡住浏览器，所以你会先看到弹窗，关闭后才看到之前的span内容。

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