document的load 和ready有什么区别？

在前端开发中，DOMContentLoaded 和 load 事件都表示网页加载的某个阶段，但它们触发的时机和代表的意义有所不同：

• DOMContentLoaded: 当 HTML 文档被完全解析和构建完成时触发，也就是 DOM 树构建完毕，无需等待样式表、图片和子框架加载完成。这意味着你可以开始操作 DOM 元素，即使页面上的某些资源（例如图片）仍在加载中。

• load: 当整个页面及其所有依赖资源（例如样式表、图片、脚本、子框架等）完全加载完成后触发。这意味着页面上的所有元素都已可用，并且所有资源都已下载完毕。

关键区别总结：

特性	DOMContentLoaded	load
触发时机	DOM 树构建完成	所有资源（包括图片、样式表等）加载完成
依赖资源	不依赖样式表、图片和子框架	依赖所有资源
执行时机	比 load 更早	比 DOMContentLoaded 更晚
适用场景	尽早执行 DOM 操作，提升用户体验	确保所有资源加载完成后执行的操作，例如初始化依赖图片大小的组件

示例：

// DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM fully loaded and parsed');
  // 可以安全地操作 DOM 元素
  document.getElementById('myElement').textContent = 'Hello!';
});

// load
window.addEventListener('load', function() {
  console.log('Page fully loaded');
  // 可以确保所有资源都已加载完成
  const imageWidth = document.getElementById('myImage').offsetWidth;
  console.log('Image width:', imageWidth);
});

最佳实践：

为了获得最佳性能和用户体验，通常建议将脚本放在 </body> 结束标签之前，并尽可能使用 DOMContentLoaded 事件来执行 DOM 操作。这样可以避免阻塞页面渲染，并允许用户更快地看到页面内容。只有当你的脚本依赖于所有资源加载完成时，才需要使用 load 事件。

更详细的解释:

DOMContentLoaded 事件的触发条件是：

1. HTML 文档被完全解析。
2. DOM 树被完全构建。
3. 所有被阻塞的脚本都已执行完毕. (defered 和 async 的脚本不会阻塞 DOMContentLoaded)

load 事件的触发条件是：

1. DOMContentLoaded 事件的所有条件都已满足。
2. 所有资源（包括图片、样式表、脚本、子框架等）都已完全加载。

希望这个解释能够帮助你理解 DOMContentLoaded 和 load 事件的区别。