hugh 的个人博客

dom加载渲染过程中触发事件

  window.addEventListener("load", function(event) {
        console.log("window load");
    });
    document.addEventListener("DOMContentLoaded", function(event) {
        console.log("DOM fully loaded and parsed");
    });
    document.onreadystatechange = function () {
        console.log(document.readyState)
    if(document.readyState == "interactive"){
        console.log("interactive script start")
        for(var i=0; i<1000000000; i++){
            // 这个同步脚本将延迟DOM的解析。
        }
        var div = document.createElement("div");
        div.innerHTML = "test insert";
        document.getElementsByTagName("body")[0].appendChild(div)
        //debugger;
        console.log("interactive script end")
    }
}
console.log("body script start")

for(var i=0; i<1000000000; i++){

// 这个同步脚本将延迟DOM的解析。

}

console.log("body script end")

依次执行结果

 body script start
body script end
 interactive
 interactive script start
 interactive script end
 DOM fully loaded and parsed
 complete
 window load