如何将脚本改为async模式？async参数应放置在何处？

没问题，我来帮你把脚本改成async模式，完全符合Google的性能优化建议！

核心方法：给<script>标签添加async属性 #

async是HTML的布尔属性，直接添加到<script>标签里就生效，不需要额外赋值（比如不用写async="true"，当然写async="async"也合法，但前者更简洁）。

正确的写法示例：

<!-- 外部脚本（最常见的场景） -->
<script src="your-target-script.js" async></script>

属性放置位置的说明 #

HTML标签的属性顺序没有强制要求，你把async放在src前面或者后面都能正常工作，比如下面两种写法都是有效的：

<!-- 写法1：src在前，async在后（更符合常见编码习惯） -->
<script src="script.js" async></script>

<!-- 写法2：async在前，src在后 -->
<script async src="script.js"></script>

不过通常大家会把src（资源路径）放在前面，属性放在后面，可读性更好。

关键注意点 #

• async脚本的执行顺序不确定：多个带async的脚本，哪个先下载完成就先执行，所以如果你的脚本之间有依赖关系（比如脚本A需要依赖脚本B的变量），就不能用async，这时候应该用defer（它会保证脚本按顺序执行，且在DOM解析完成后执行）。
• DOM操作的注意事项：async脚本下载完成后会立即执行，这时候可能页面DOM还没完全解析完毕。如果你的脚本需要操作DOM，记得在脚本内部监听DOMContentLoaded事件，或者把脚本放在<body>的末尾（加async依然有效，还能配合DOM加载时机）。

比如需要操作DOM的async脚本，内部可以这么写：

// 在你的脚本里添加DOM加载完成的监听
document.addEventListener('DOMContentLoaded', function() {
  // 这里写操作DOM的代码
  console.log('DOM ready，开始操作');
});

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