load和DOMContentLoaded和$(document).ready之间的区别

原创已于 2022-03-25 21:51:06 修改 · 407 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

于 2022-03-24 16:18:32 首次发布

前端面试同时被 2 个专栏收录

27 篇文章

订阅专栏

前端知识点基础

21 篇文章

订阅专栏

这篇博客探讨了JavaScript中window.onload、DOMContentLoaded和$(document).ready这三个事件的区别。onload事件在所有资源（包括DOM、CSS、JS和图片）加载完成后触发，而DOMContentLoaded则在DOM树构建完成时执行，早于onload。$(document).ready与DOMContentLoaded类似，都在DOM就绪时调用回调函数。因此，DOMContentLoaded和$(document).ready适用于不依赖外部资源的DOM操作，而onload适合确保所有资源加载完毕后再执行代码。

load和DOMContentLoaded和$(document).ready之间的区别

onload表示当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），才会触发此监听函数,所以当资源较多是，回调函数就会等待很久才能够执行；

而DOMContentLoaded是仅仅当dom树加载完毕后执行的回调。所以会在onload触发之前执行。

jquery也封装了$(document).ready方法，ready方法与原生的DOMContentLoaded方法作用相同都是当dom树加载完毕后即可执行回调。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 40px;
        height: 40px;
        border: 1px solid pink;
    }
</style>

<body>
    <div></div>

    <script>
        window.onload = function () {
            console.log("load");
        }
        window.addEventListener("DOMContentLoaded", () => {
            console.log("domContentLoad");
        })

    </script>
</body>

</html>