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

veggie_a_h

已于 2022-03-25 21:51:06 修改

阅读量303

点赞数

分类专栏：前端知识点基础前端面试文章标签： html

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

本文链接：https://blog.csdn.net/wanghe1111_/article/details/123714234

版权

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

27 篇文章 1 订阅

订阅专栏

前端知识点基础

21 篇文章 0 订阅

订阅专栏

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>