script 标签中 defer 和 async 属性的作用及区别
在现代 Web 开发中，JavaScript 的使用几乎是不可避免的。随着应用逻辑日益复杂，脚本文件体积也在增长。为了优化页面加载性能，浏览器提供了 async 和 defer 两个属性来改变脚本的加载和执行方式。理解它们的差异对于提升用户体验至关重要。
<script> 标签的 defer 属性
工作原理
defer 是一个布尔属性。当存在时，它告诉浏览器不要阻塞 HTML 解析，而是并行下载脚本。关键点是：脚本会在整个 HTML 文档解析完成后，按照它们在文档中出现的顺序执行。
<script defer src="script1.js"></script>
<script defer src="script2.js"></script>
即使 script2.js 比 script1.js 先下载完成，script1.js 也会先执行。这保证了依赖关系的正确性。
代码示例
下面是一个简单的测试结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</>
Hello, World!
