DOMContentLoaded和load

document.DOMContentLoaded和window.load都是页面加载的时候触发的,只是加载时机不一样

页面的加载顺序:

1.从上往下解析html节点,生成dom树和css树

2.如果遇到js或css文件,则加载js脚本文件和css等

3.js脚本如果是内联,则会执行脚本,否则继续解析

4.当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完全加载。

5.在图片等资源都加载完成后,才会触发load

执行方法:

  1. DOMContentLoaded执行:


    如果将link置于script之后,就会立即打印。

  2. load 执行:
    window.addEventListener('load', (event) => {
    console.log('page is fully loaded');
    });
    或者:
    window.onload = (event) => {
    console.log('page is fully loaded');
    };

你可能感兴趣的:(DOMContentLoaded和load)