window.onload 和 body.onload 的区别

JavaScript 中，我们经常使用两个事件来处理页面的加载： window.onload 和 body.onload，但它们之间有什么区别呢？本篇文章将为您详细介绍它们之间的差异和适用场景。

window.onload

window.onload 表示整个页面加载完毕，即 HTML、CSS、JavaScript、图片等资源等全部加载完成。通常我们会在 window.onload 中执行一些需要等待页面全部加载完后才能执行的代码。例如：

window.onload = function () {
  // 执行需要等待页面全部加载完后才能执行的代码
};

需要注意的是，当页面中存在许多资源时，window.onload 的触发可能会比较缓慢，影响用户体验。

body.onload

body.onload 表示仅当页面的 HTML 和 CSS 加载完毕并解析完成后才会执行。虽然图片和 JavaScript 脚本仍在加载，但浏览器将在此事件触发后开始加载它们。此时，我们可以在 body.onload 内部执行一些需要提前处理的内容，例如：

document.body.onload = function () {
  // 执行需要提前处理的内容
};

和 window.onload 不同，body.onload 的触发通常会比较快，能够提高用户体验。

适用场景

根据以上的介绍，我们可以总结出 window.onload 和 body.onload 的适用场景：

• 当需要等待页面全部加载完毕后才能执行的代码时，使用 window.onload。
• 当需要提前处理一些 HTML 和 CSS 中的内容时，使用 body.onload。

需要注意的是，这两个事件都只会在页面首次加载时触发。如果页面更新了内容并重新加载，它们将再次触发。