一、属性介绍：
1、async：表示应该立即开始下载脚本，但不能阻止其他的页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。
2、defer：表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。(在IE7及更早的版本中，在行内脚本也可以指定这个属性)。
二、详细介绍：
--异步执行脚本
使用async就相当于告诉浏览器立即下载脚本，此时和页面的渲染是异步的，但是当脚本加载完毕后会立即执行改脚本，如果此时HTML还未解析完成，会造成阻塞。
以下是使用 async 修饰的 <script> 标签的示例：
<!DOCTYPE html>
<html>
<head>
<title>使用 async 修饰的 script 标签</title>
<script async src=""></script>
<script async src=""></script>
</head>
<body>
<h1>使用 async 修饰的 script 标签</h1>
</body>
</html>在上面的示例中，我们在 <script> 标签中添加了 async 属性，并指定了脚本文件的路径 ""。这样浏览器会异步加载该脚本，而不会阻塞页面的渲染。(注意这里是加载不是执行)
**请注意，由于脚本是异步加载的，它将在加载完成后立即执行，而不会按照它们在文档中的顺序执行。这意味着 脚本可能先于 脚本执行。因此，如果脚本之间有依赖关系，需要谨慎管理加载顺序。
此外，使用 async 修饰的脚本会在它们被加载时立即执行，而不需要等待整个文档解析完成。这可能会导致一些问题，例如脚本可能无法访问尚未解析的 DOM 元素。为了避免这些问题，通常建议将脚本放置在 <body> 元素的结尾，以确保在脚本执行时 DOM 已经完全解析。
2.defer --推迟执行脚本
defer 属性也用于异步加载脚本，但与 async 不同的是，defer加载完后不会立即执行, 会延迟到整个页面解析完成在执行， defer 会保持脚本的执行顺序与其在文档中的顺序一致。
<!DOCTYPE html>
<html>
<head>
<title>使用 defer 修饰的 script 标签</title>
<script defer src=""></script>
<script defer src=""></script>
<script defer src=""></script>
</head>
<body>
<h1>使用 defer 修饰的 script 标签</h1>
</body>
</html>在上面的示例中，我们在三个 <script> 标签中添加了 defer 属性，并指定了每个脚本文件的路径。这样浏览器会异步加载这些脚本，并按照它们在文档中的顺序依次执行。
与 async 不同，使用 defer 修饰的脚本会在整个文档解析完成后执行，但在 DOMContentLoaded 事件之前执行。这意味着脚本可以访问完整的 DOM 结构，而不必等待整个文档加载完成。
注意：defer 和 async 属性不能同时在一个标签中使用，因为它们具有相互排斥的效果。
使用 async 和 defer 修饰的 <script> 标签可以帮助提高页面加载性能和渲染速度，但在使用时需要根据实际需求进行选择。
三、总结
1.相同点
1.表示async和defer都只能用于外部脚本文件。
2.都是异步加载脚本文件
2.不同点
在HtML解析完成后执行，async加载完立即执行，可能阻塞HTML的解析(是执行导致的，不是加载)。
延迟执行，执行的顺序不会改变；async的执行顺序与其加载速度有关，先加载完先执行。
四、知识点补充
1.DOMContentLoaded事件
在 HTML 文档解析过程中，当浏览器完成构建 DOM 树，所有的初始 HTML 已经完全加载和解析，但外部资源（如图片、样式表和嵌入的框架）可能还没有完全下载时触发。也就是说，DOMContentLoaded 事件标志着页面的基本结构已经准备就绪，可以进行操作和修改 DOM 元素。
事件
load 事件是在整个 HTML 文档以及所有的外部资源（如图片、样式表、嵌入的框架等）都已经完全加载和解析完成后触发的事件。
使用 load 事件可以确保页面的所有资源都已经被下载并解析完成，可以进行一些比较耗时或需要等待资源加载的操作。不过需要注意的是，load 事件的触发时间比 DOMContentLoaded 事件要晚，所以在处理一些与页面元素相关的操作时，需要选择合适的事件来监听。