使用defer和async属性后，JavaScript加载和HTML解析之间的关系有所不同。了解这些差异可以帮助优化网页加载性能。
defer属性
行为：
- 当使用
defer属性时，浏览器会异步加载JavaScript文件，不会阻塞HTML的解析。 - 所有带有
defer属性的脚本会按它们在文档中的出现顺序执行。 - 这些脚本会在HTML解析完成后执行，但在
DOMContentLoaded事件触发之前。
优点：
- 适用于需要确保脚本按顺序执行的情况。
- 不会阻塞HTML解析，从而提升页面的加载性能和用户体验。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Defer Script Example</title>
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
async属性
行为：
- 当使用
async属性时，浏览器也会异步加载JavaScript文件，不会阻塞HTML的解析。 - 一旦脚本文件下载完成，就会立即执行，这可能发生在HTML解析完成之前。
- 脚本的执行顺序不一定按照它们在文档中的出现顺序。
优点：
- 适用于不依赖于其他脚本和DOM结构的独立脚本。
- 加快页面的初始加载速度，因为脚本可以在HTML解析过程中加载。
缺点：
- 脚本的执行顺序无法保证，因此对于依赖顺序执行的脚本可能不适用。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Script Example</title>
<script src="script1.js" async></script>
<script src="script2.js" async></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
总结
defer：脚本异步加载且按顺序执行，保证在HTML解析完成后执行，不会阻塞HTML解析。async：脚本异步加载并尽快执行，可能在HTML解析完成前执行，不保证顺序，不会阻塞HTML解析。
选择使用defer还是async取决于脚本的用途和对执行顺序的要求。如果脚本需要与DOM交互并依赖于特定的加载顺序，defer是更好的选择。如果脚本独立且不依赖于其他脚本或DOM结构，async则可以提供更快的加载速度。