用代码示例演示如何使用async和defer属性异步加载JS文件

下面用代码示例具体展示 async 和 defer 属性的用法，你可以直接复制到HTML文件里运行看看效果：

配合这几个JS文件内容会更直观（你可以创建对应的文件）：

1. normal.js

// 模拟耗时操作
setTimeout(() => {
  console.log('普通加载的JS执行了');
}, 1000);

2. async1.js

console.log('async1加载执行了');

3. async2.js

console.log('async2加载执行了');

4. defer1.js

console.log('defer1加载执行了');

5. defer2.js

console.log('defer2加载执行了');

运行后你会发现：

• 普通加载的JS会让页面等它执行完才继续
• async的两个JS执行顺序不确定（谁先加载完谁先跑）
• defer的两个JS一定按顺序执行（defer1先于defer2）
• 打开控制台看输出顺序，就能清楚看到它们的区别了