使用DOMContentLoaded事件或者async和defer属性来替代.onload，写出前后对比代码示例

`DOMContentLoaded` 事件和 `async` 和 `defer` 属性都是JavaScript处理页面加载的不同策略，用于优化网页性能。

`DOMContentLoaded` 事件发生在文档的结构解析完成之后，但可能还包含一些外部资源如图片、脚本等。你可以像这样使用它：

document.addEventListener('DOMContentLoaded', function() {
  // 当DOM内容准备就绪后，这里开始执行
  console.log('DOM已经加载完毕');
});

而 `async` 和 `defer` 属性则是针对 `<script>` 标签的。`async` 表明脚本是非阻塞的，会立即下载并尝试执行，可能不会等待整个文档加载完。`defer` 则是延迟执行，直到文档解析完成后才会执行。例如：

<script async src="script.js"></script>
<!-- 或者 -->
<script defer src="script.js"></script>

**对比：**
- `DOMContentLoaded` 适用于所有类型的脚本，包括内联和外部脚本，可以确保在开始执行之前DOM已经完全加载。
- `async` 适合于非关键依赖的脚本，能提高页面渲染速度，因为它允许浏览器在脚本下载的同时继续解析HTML。
- `defer` 更适合那些希望按顺序执行的脚本，因为它们会在DOMContentLoaded之后按插入顺序依次执行。

**相关问题--:**
1. 为什么推荐使用DOMContentLoaded而不是onload？
2. async和defer的区别是什么？
3. 如何在现代Web开发中更好地利用这两个特性避免阻塞性加载？