DOMContentLoaded与load

最新推荐文章于 2023-03-16 10:57:47 发布

richest_qi

最新推荐文章于 2023-03-16 10:57:47 发布

阅读量337

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qzw752890913/article/details/106437502

版权

JavaScript 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

load事件

图像加载完后，会触发img上的load事件
css文件加载完后，会触发link上的load事件
js文件加载完后，会触发script上的load事件
图像、css文件、js文件等全部资源加载完毕后会触发body上的load事件

        document.body.onload = function(){
            console.log('body loaded');
        }

        var img = new Image();
        img.src = './doraemon.gif';
        img.onload = function(){
            console.log('img loaded');
        }
        document.body.appendChild(img);

        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = './index.css';
        link.onload = function(){
            console.log('css loaded');
        }
        document.querySelector('title').appendChild(link);

        var script = document.createElement('script');
        script.src='./test.js';
        script.onload = function(){
            console.log('js loaded');
        }
        document.body.appendChild(script);

DOMContentLoaded事件

load事件需要等图像、css文件、js文件等所有资源文件加载完后方触发。DOMContentLoaded事件则不同，只要DOM树形成就会触发该事件，不需要等所有的资源文件全部加载完毕。
因此，加载一个页面时，先触发DOMContentLoaded事件，后触发load事件。

        document.addEventListener('DOMContentLoaded',function(e){
            console.log('DOMContent loaded')
        })
        
        document.body.onload = function(){
            console.log('body loaded');
        }

readystatechange事件

load事件、DOMContentLoaded事件都与readystatechange事件有关，涉及到document.readyState的变化。
document.readyState有5个状态，分别是

unintialized
loading
loaded
interactive
complete
当然，并不是所有对象都会经历这5个状态。

        console.log(document.readyState);
        document.addEventListener('DOMContentLoaded',function(e){
            console.log('DOMContent loaded,',document.readyState);
        })

        document.body.onload = function(){
            console.log('body loaded,',document.readyState);
        }

在这里插入图片描述
开始加载页面，document.readyState是loading；
形成完整DOM树后，触发DOMContentLoaded事件，document.readyState变成了interactive；
等所有资源全部加载完毕触发load事件时，document.readyState则是complete。

性能分析

使用load事件和DOMContentLoaded事件 触发的时间差计算资源加载时间。

//main.js
const add = (x,y) => x+y;
const sum = add(1,2);

//style.css
body{
  background-color:lightcyan
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <link rel='prefetch' href='./style.css' as='style'>
    <link rel='prefetch' href='./main.js' as='script'> 

    <link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="root">hello world</div>
<script src="./main.js"></script>
<script>
    let t1,t2;
    document.addEventListener('DOMContentLoaded',(event) => {
        t1 = Date.now();
    });
    window.onload = event => {
        t2 = Date.now();
        console.log(t2-t1);
    }
</script>
</body>
</html>