帮我写一个程序，比较async和defer两种异步加载的不同

在JavaScript中，`async` 和 `defer` 都是用于处理网页资源异步加载的技术，但它们的作用范围和时机有所不同。

`async` 主要用于脚本标签（`<script>`），表示该脚本加载完成后会立即执行，即使在DOMContentLoaded事件之前。这意味着如果脚本的内容需要DOM树完成解析才能运行，可能会阻塞页面渲染。示例代码如下：

<script async src="your_async_script.js"></script>

在这个例子中，`async` 使得 `your_async_script.js` 可以并发下载，不会阻塞DOM解析，但脚本执行会在文档加载完成后尽快开始。

`defer` 也是用于脚本，但它意味着脚本会被延迟到`DOMContentLoaded`事件之后再执行，这有利于保持初始页面加载速度。示例代码如下：

<script defer src="your_deferred_script.js"></script>

这里的 `your_deferred_script.js` 的加载和执行都不会影响页面的初始渲染，但在文档结构解析完毕后再执行内容。

总结一下异同：
- **异步** (`async`)：脚本并行加载，一旦下载就立即执行，可能影响DOM解析性能。
- **延迟** (`defer`)：脚本延迟到DOMContentLoaded后执行，有助于提高初始页面加载速度。