<script>标签属性async 和defer 有什么不一样

2026年7月15日

script脚本默认是按顺序同步执行的，如果在html头部引入了2个脚本文件，它们会按顺序依次往下执行完，阻塞页面的渲染，所以这时候脚本内有获取dom的操作是获取不到页面元素的。

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./s01.js"></script>
    <script src="./s02.js"></script>
  </head>

// s01.js
const dom = document.getElementById("btn");
console.log(dom);
console.log("s01.js");

如果给script标签加上async标签，它会立即下载，下载完立即执行。不会阻塞其他资源的加载，如果下载速度快于文档加载速度，那脚本里就可以获取到页面元素。

<script src="./s01.js" async></script>

还有一个defer属性，它会等到文档解析完成再执行，并且多个写有defer属性的脚本，它们会按顺序加载执行。

<script src="./s01.js" defer></script>