如何阻止HTML body渲染及脚本执行直至头部脚本加载执行完成？

核心逻辑很简单：默认的同步<script>标签（不带async或defer属性）本身就会完全阻塞HTML解析流程——浏览器会暂停解析后续HTML（包括<body>内容），直到该脚本完成下载并执行完毕，才会继续解析。

关键注意点 #

1. 修正script标签写法：HTML中<script>标签不能使用自闭合写法（/>），必须显式闭合（</script>），否则浏览器会无法正确识别标签结束位置，导致解析逻辑混乱。你的示例代码需要修正为：

<html>
  <head>
    <!-- 我完全可控头部及该脚本内容 -->
    <script type='text/javascript' src='some-script.js'></script>
  </head>
  <body>
    <!-- 我无法控制body内的内容 -->
    <script type='text/javascript' src='some-other-script.js'></script>
  </body>
</html>

2. 同步脚本的阻塞机制：
   • 浏览器解析到<head>里的同步脚本时，会立即停止后续HTML的解析工作。
   • 优先完成该脚本的下载，下载完成后立刻执行所有耗时操作（不管耗时x有多长）。
   • 只有当脚本执行完全结束后，浏览器才会继续解析<body>部分的内容，此时才会发现并开始下载some-other-script.js。

额外说明 #

浏览器的预加载扫描器不会提前下载some-other-script.js，因为预加载扫描器只能扫描已经解析完成的HTML内容，而<body>部分在头部脚本执行完毕前不会被解析，所以扫描器无法获取到该脚本的URL，自然不会提前发起请求。

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