关于script标签async属性是否阻塞页面内容的疑问

你的核心误区是把「HTML解析阻塞」和「页面内容显示」直接划了等号，这两者其实不是一回事。

先明确async的完整工作逻辑：

• 脚本的下载过程和HTML解析并行进行，这阶段完全不阻塞解析
• 当脚本下载完成的瞬间，浏览器会立即暂停当前的HTML解析，优先执行这个脚本；脚本执行完毕后，再恢复HTML解析

那为什么资料会说「页面内容会立即显示：async不会阻塞它」？因为浏览器是边解析HTML边渲染内容的——在脚本下载的这段时间里，前面已经解析完成的HTML内容早就被渲染到页面上了，用户能实时看到这部分内容，不会像无async的脚本那样一直白屏等脚本处理完。

举个实际场景的例子：

<body>
  <header>网站头部导航</header>
  <script async src="large-analytics-script.js"></script>
  <main>网站核心内容</main>
</body>

在large-analytics-script.js下载的过程中，浏览器已经解析并渲染出了<header>部分，用户能正常看到导航栏，不会因为脚本在下载就看不到任何内容。只有当脚本下载完成的那一刻，HTML解析会暂停（此时<main>可能还没解析完），但用户已经看到了头部内容，感知上页面并没有被完全阻塞。

对比普通无属性的脚本：脚本的下载+执行会全程阻塞HTML解析，用户要等到脚本完全处理完才能看到页面的任何内容，这才是真正的「页面内容被阻塞」。

总结：async不会阻塞页面内容的逐步显示，但会在脚本执行时暂停后续HTML的解析（但不影响已经渲染出来的内容）。资料里的描述是从用户感知出发，强调用户不需要等待脚本完成就能看到部分页面内容，而非说脚本执行时完全不暂停解析。

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