为何使用async属性后script标签仍按顺序执行？

核心原因 #

你遇到的问题本质是：async属性对内联<script>标签（未指定src属性的脚本）完全无效。

async的设计目标是控制外部脚本的加载与执行逻辑：它允许浏览器在下载外部脚本文件的同时继续解析HTML，脚本下载完成后立即执行，不受HTML解析进度和其他脚本顺序的约束。但对于内联脚本，因为不需要网络下载，浏览器会直接按照文档流的顺序同步执行，async属性在这里没有任何作用。

解决方案 #

方案1：改用外部脚本（推荐） #

将需要异步执行的代码移到外部JS文件中，通过src引入并添加async属性：

1. 创建async-script.js文件，内容如下：

alert("execute this first");

2. 修改HTML代码：

<!DOCTYPE html>
<html>
<body>
<h1>The script async attribute</h1>
<p id="p1">Hello World!</p>
<script>alert("execute this second")</script>
<script async src="async-script.js"></script>
</body>
</html>

此时外部脚本会被异步加载，加载完成后立即执行，通常会比前面的内联脚本先触发弹窗（注意：多个async脚本的执行顺序取决于各自的下载完成时间，无法保证固定顺序）。

方案2：动态创建内联脚本（适合必须内联的场景） #

如果代码必须内联，可以通过动态创建<script>元素的方式实现异步执行：

<!DOCTYPE html>
<html>
<body>
<h1>The script async attribute</h1>
<p id="p1">Hello World!</p>
<script>alert("execute this second")</script>
<script>
  // 动态生成脚本并插入DOM
  const asyncScript = document.createElement('script');
  asyncScript.textContent = 'alert("execute this first");';
  document.body.appendChild(asyncScript);
</script>
</body>
</html>

动态创建的脚本默认以异步方式执行，不会阻塞当前的HTML解析和同步脚本执行，因此会优先触发弹窗。

额外说明 #

如果需要严格控制脚本的执行顺序（比如确保某脚本一定在另一脚本之后执行），async可能不是最佳选择，此时可以考虑：

• 使用defer属性（仅对外部脚本有效，脚本会在HTML解析完成后按引入顺序执行）
• 监听DOMContentLoaded事件，在页面加载完成后按指定顺序执行代码

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