script标签的defer和async

在Web开发中，我们经常会使用



```

#### 步骤2：编写JavaScript文件
script1.js
```javascript
console.log("Script 1 is loaded and executed.");
```

script2.js
```javascript
console.log("Script 2 is loaded and executed.");
```

### 代码解释
- 在步骤1中，我们创建了一个HTML文件，并在其中引入两个外部JavaScript文件，一个带有defer属性，一个带有async属性。
- 在步骤2中，我们分别在两个JavaScript文件中写入了控制台输出的语句，用于测试脚本的加载和执行顺序。

### 示例演示
在浏览器中打开HTML文件，打开开发者工具查看控制台，可以看到Script 1会在Script 2之前输出，这是因为defer属性保证了按照在页面中出现的顺序执行，而async属性则会异步加载执行。

通过上面的示例，我们可以看出defer和async属性的作用，可以根据需求选择合适的属性来控制脚本的加载和执行顺序，提高页面性能和用户体验。希望本文能帮助到你理解script标签的defer和async属性的用法。如果有任何疑问，欢迎留言讨论。