Window .onload vs document. Onload

在网页开发中，window.onload 和 document.onload 是两个常用于处理页面加载完成后执行代码的事件，但它们之间存在一些重要的区别：

1. 触发时机:

   • window.onload: 此事件将在页面中的所有内容，包括所有的外部资源如图片、CSS、JavaScript文件等完全加载完成后被触发。
   • document.onload: 实际上，在标准的HTML DOM中，并不存在 document.onload 事件。通常人们提到的是 DOMContentLoaded 事件，该事件会在文档的HTML被完全加载和解析完成后触发，不需要等待样式表、图像和子框架的完全加载。

2. 使用场景:

   • window.onload:
     • 当你需要确保页面上所有元素（包括媒体文件）全部加载完成后再执行某些操作时，比如初始化一个依赖于图片尺寸的脚本。
     • 示例场景：网页上有一个动态的图形显示，它依赖于页面上的多张图片尺寸，这种情况下，使用 window.onload 确保所有图片都加载完成后再进行图形渲染，避免出现错误。
   • DOMContentLoaded:
     • 当你的脚本只依赖于DOM元素时，可以使用这个事件，这样可以更快地执行脚本，不必等待非必要资源的加载。
     • 示例场景：假设你的网页中有用户登录表单，并且你想在文档结构加载完成后立即对表单进行初始化或添加事件监听器，此时使用 DOMContentLoaded 就足够了，无需等待所有图片或样式表加载完成。

3. 兼容性:

   • window.onload 在所有现代浏览器中都得到了支持。
   • DOMContentLoaded 在现代浏览器中也普遍支持，但在老旧的浏览器（如IE8及以下版本）中可能不被支持。

总结来说，选择使用 window.onload 或 DOMContentLoaded 取决于你的具体需求——是否需要等待所有静态资源都加载完成，或者仅需HTML DOM就绪即可。在实际开发中，理解这两者的区别有助于你更高效地管理资源加载和脚本执行，优化用户体验。