小记DOMContentLoaded、readystatechange、load、ready和script async/defer

DOMContentLoaded、readystatechange、load、ready

参考document.readyState - Web API 接口参考 | MDN (mozilla.org)

function consolelogreadyState() {
    switch (document.readyState) {
        case "loading":
            console.log("1-> 表示文档还在加载中，即处于“正在加载”状态。");
            break;
        case "interactive":
            // ready
            console.log(
              "2-> 文档已经结束了“正在加载”状态，DOM元素可以被访问。\n但是像图像，样式表和框架等资源依然还在加载。"
            );
            break;
        case "complete":
            // load
            console.log("4-> 页面所有内容都已被完全加载");
            break;
    }
};
consolelogreadyState();
document.onreadystatechange = function () {
    consolelogreadyState();
};
document.addEventListener("DOMContentLoaded", function () {
    console.log("3-> DOMContentLoaded 并不需要等到css下载完");
});
window.addEventListener("load", function () {
    console.log("5-> window 所有资源加载完成");
});

script async/defer 这篇图解文章写的比较详细

• 当script中有defer属性时，脚本的加载过程和HTML加载是异步发生的，等到HTML解析完，脚本才开始执行。
• 当script有async属性时，脚本的加载过程和HTML加载也是异步发生的。但脚本下载完成后会停止HTML解析，执行脚本，脚本解析完继续HTML解析。
• 当script同时有async和defer属性时，执行效果和async一致。