解释文档加载与 DOMContentLoaded？

八股文_JavaScript面试题 0 48

在JavaScript中，document的加载过程涉及两个重要的事件：load事件和DOMContentLoaded事件。它们在不同的时间点触发，具有不同的意义和用途。

DOMContentLoaded：当HTML文档完全加载并且解析完成后（不等待样式表、图片等其他资源的加载），就会触发DOMContentLoaded事件。此时，DOM树已经构建完毕，开发者可以开始操作DOM。
load：load事件在页面中的所有资源（包括图片、样式表、脚本等）都加载完成后触发。因此，load事件通常会等到页面的所有资源都加载完毕才会触发，时间上比DOMContentLoaded稍晚。

DOMContentLoaded事件会在文档的初步HTML加载完成后触发，意味着DOM树已经构建完毕，开发者可以开始访问和操作DOM元素。这个事件的触发并不等待页面中其他资源的加载（如图片、CSS文件、脚本等），因此它比load事件要早。

例如，在以下HTML文档中，当文档的HTML加载并解析完成时，会触发DOMContentLoaded事件：

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded and parsed');
});

load事件则等到页面的所有资源，包括图片、样式表、脚本等完全加载完成后，才会触发。这意味着load事件的触发时间通常会比DOMContentLoaded事件晚，特别是在页面上包含大量资源时。

例如，以下代码在页面的所有资源加载完成后执行：

window.addEventListener('load', function() {
    console.log('All resources finished loading');
});

DOMContentLoaded：当你只关心DOM结构，而不关心页面的其他资源（如图片或样式表）时，可以使用DOMContentLoaded事件。它允许你在DOM构建完成后，尽早开始DOM操作或绑定事件，从而提高页面响应速度。
load：如果你需要等到页面的所有资源（包括图片、视频、CSS等）完全加载完毕时再进行某些操作，那么load事件是更合适的选择。例如，预加载的图像、字体等可能会影响页面的最终布局和呈现，这时候可以在load事件中进行相关的操作。

DOMContentLoaded：当你想要尽早操作页面的内容，比如修改DOM、绑定事件等，而不需要等待图片或外部资源的加载时，使用DOMContentLoaded。

示例：
```
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('myElement').textContent = 'DOM is ready!';
});
```
load：当你需要等所有资源（如图片、字体等）加载完成后再进行操作时，使用load事件。
示例：
```
window.addEventListener('load', function() {
  alert('Page fully loaded, including all resources!');
});
```

理解这两者的区别，可以帮助我们更合理地控制页面加载过程中的脚本执行时机，提高页面的响应速度和性能。