了解 DOMContentLoaded 事件

当纯 HTML 被完全加载以及解析时，DOMContentLoaded 事件会被触发，而不必等待样式表，图片或者子框架完成加载。

一个易混用但不同的事件是，load,这个事件仅仅应该在探测到整个页面完全加载完成时被使用。一个常见的错误就是在该使用DOMContentLoaded的地方使用了load 。

DOMContentLoaded事件在浏览器完成解析HTML文档，构建DOM树之后触发，但在加载外部资源（如图片和样式表）之前。这意味着当我们的脚本在DOMContentLoaded事件中运行时，它可以安全地操作DOM，但可能无法使用所有的外部资源。

使用场景：

1、动态脚本加载：如果你的网页需要加载大量的脚本，你可能想要在DOMContentLoaded事件后再加载它们，以提高页面的初始加载速度。

2、DOM操作：如果你的脚本需要在DOM加载完成后进行操作（例如，添加事件处理程序或动态创建元素），你可以在DOMContentLoaded事件中执行这些操作。

3、初始化UI：如果你的脚本需要在页面加载时初始化一些UI元素（例如，滑动菜单或模态对话框），你可以在DOMContentLoaded事件中执行这些初始化操作。

示例代码：

<script>  document.addEventListener("DOMContentLoaded", (event) => {    console.log("DOM fully loaded and parsed");  });
  for (let i = 0; i < 1000000000; i++) {} // 这段同步脚本将会延迟 DOM 解析，  // 所以 DOMContentLoaded 事件将会延迟执行。</script>

请注意，DOMContentLoaded事件可能在window.onload事件之前触发，因为window.onload事件需要等待所有外部资源（包括图片和样式表）加载完成后才会触发。

defer和async是HTML中 <script> 标签的两个属性，它们影响浏览器加载和执行脚本的方式。

1、defer：当 <script> 标签有defer属性时，浏览器会在解析HTML文档的同时并行加载脚本，但会等到整个文档解析完成（即DOMContentLoaded事件触发后）再执行脚本。如果有多个带有defer属性的脚本，它们会按照在文档中出现的顺序执行。

2、async：当 <script> 标签有async属性时，浏览器会在解析HTML文档的同时并行加载脚本，一旦脚本加载完成，浏览器会立即执行它。这可能会在DOMContentLoaded事件触发之前，也可能在之后，这取决于脚本的加载速度。

所以，如果你的脚本使用了defer属性，那么它会在DOMContentLoaded事件之后执行。如果你的脚本使用了async属性，那么它可能在DOMContentLoaded事件之前或之后执行，这取决于脚本的加载速度。