在前端开发中，我们经常需要在页面完全加载后执行一些操作，比如初始化某个组件、发送请求等。而要实现这个功能，通常有两种方式：通过window.onload事件或是在<body>标签上添加onload属性。本文将会探讨这两种方法的异同点，并分别介绍它们的使用场景。
window.onload 事件
window.onload 是一个在整个页面及其依赖资源（如图片、样式表、脚本等）都已完成加载后触发的事件。因为在此时所有资源都已经可用，所以这个事件适合用于执行一些需要等待所有资源就绪后才能执行的操作。
以下是一个简单的示例代码：
--------- -----
----- ----------
------
----- ----------------
-----------------------
--------
------------- - ---------- -
----------------------
-
---------
-------
------
--------- ----------
---- ----------------- ------------
-------
-------在上述代码中，window.onload 事件被绑定到了一个匿名函数上，当页面和图片都加载完成后，该函数会被调用并输出 '页面加载完成'。
需要注意的是，如果在 window.onload 事件中添加了多个函数，那么它们会按照添加的顺序依次执行。
body onload属性
<body> 标签上的 onload 属性用于在页面主体内容加载完成后触发。与 window.onload 事件不同，它只需要等待主体内容就绪即可触发，无需等待其他依赖资源（如图片、样式表、脚本等）。
以下是一个使用 onload 属性的示例代码：
--------- -----
----- ----------
------
----- ----------------
-----------------------
--------
-------- ------ -
------------------------
-
---------
-------
----- ----------------
--------- ----------
---- ----------------- ------------
-------
-------在上述代码中，当页面主体内容加载完成时，init() 函数会被调用并输出 '页面主体加载完成'。
需要注意的是，如果在 <body> 标签上同时设置了 onload 和 window.onload，那么只有 window.onload 事件会被触发。
选择正确的方式
在进行页面初始化操作时，我们应该根据具体场景选择合适的方法。
如果需要等待所有资源都准备好后才能进行初始化，那么使用
window.onload事件。如果只需要在主体内容就绪后进行初始化，那么可以使用
<body>标签上的onload属性。
另外，由于 window.onload 事件会在所有资源都准备好后才触发，因此可能会对页面加载速度产生一定的影响。如果我们只需要在 DOM 树构建完成后进行一些初始化操作，那么可以考虑使用 DOMContentLoaded 事件来取代 window.onload。它会在 DOM 树构建完成后立即触发，而无需等待其他资源加载完成。
以下是一个使用 DOMContentLoaded 事件的示例代码：
--------- -----
----- ----------
------
----- ----------------
-----------------------
--------
--------------------------------------------- ---------- -
------------------------
---
---------
-------
------
--------- ----------
---- ----------------- ------------
-------
-------在上述代码中，
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/8988