在前端开发中，当网页完全加载后要进行某些操作，我们通常使用 window.onload 或者 document.onload 来处理。这两个方法看起来很相似，但它们有不同的行为和工作方式。
window.onload
window.onload 事件会在页面中所有元素（包括图片等资源）都加载完毕之后才被触发。这意味着在这个事件触发之前，无法保证页面上的任何元素都已经渲染完成。因此，如果您想在页面完全加载后执行一些操作，可以使用 window.onload 方法。
下面是一个 window.onload 示例：
------------- - ---------- - -- ---- --
document.onload
与 window.onload 不同，document.onload 事件仅在文档内容加载完毕之后触发。这意味着页面上的所有 DOM 元素都已经被创建，并且可以通过 JavaScript 进行访问和操作。document.onload 事件比 window.onload 更早地触发，因此可以更快地执行代码。
下面是一个 document.onload 示例：
--------------- - ---------- - -- ---- --
选哪个？
那么应该使用哪个事件呢？这取决于您的需求。如果您需要在所有资源都加载完成后才能执行代码，那么使用 window.onload 更为合适。如果您只需要在文档内容加载完成后就可以执行代码，则可以使用 document.onload。
除了这些事件之外，还有其他一些事件用于处理页面加载过程中的不同阶段。例如，在 DOM 树构建完成后触发 DOMContentLoaded 事件，或在资源开始加载时触发 loadstart 事件等等。您可以根据自己的需求选择适当的事件。
总结
在前端开发中，了解 window.onload 和 document.onload 的区别至关重要。这样可以帮助您正确地控制代码的执行时间，并避免出现意外错误和延迟。请记住：
- 使用
window.onload来确保所有资源都已加载完毕后再执行代码。 - 使用
document.onload来尽早地执行代码，但仅在文档内容加载完毕后才执行。 - 选择正确的事件，以便在页面加载过程中进行必要的操作。
示例代码
以下是一个使用 window.onload 的示例：
------
--------- ----------
---- ----------------
--------
------------- - ---------- -
---------------- --------- ---- ---- ----------
-- ----
--
---------
-------以下是一个使用 document.onload 的示例：
------
--------- ----------
---- ----------------
--------
--------------- - ---------- -
--------------------- ------- --- ---- ----------
-- ----
--
---------
-------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8186