DOMContentLoaded 和 load

DOMContentLoaded
当初始HTML文档被完全加载和解析时，DOMContentLoaded事件被处罚，而无需等待样式表，图形和子框架完成加载。

如果我们希望DOM在用户请求页面后尽可能快的解析，你可以使用javascript异步加载以及优化样式表的加载，否则，并行加载将使页面负载减慢，窃取主要html文档的流量

例子

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
      console.log("DOM开始解析");
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
      console.log("DOM开始解析");
  });

  for(var i=0; i<1000000000; i++){
      // 这个同步脚本将延迟DOM的解析。
      // 所以DOMContentLoaded事件稍后将启动。
  } 
</script>

兼容性

  兼容到IE9

在IE8中我们可以使用readyStatechange

 

load
当一个资源及其依赖资源已完成加载时，将触发load事件

<script>
  window.addEventListener("load", function(event) {
    console.log("All resources finished loading!");
  });
</script>

onreadystatechange
当一个文档的readyState属性发生更改时，onreadystatechange事件就会触发

// 模拟DOMContentLoaded事件

document.onreadystatechange = function () {
    if (document.readyState === "interactive") {
        initApplication();
    }
}

既然说到这里了，那我们就在说说readyState

document.readyState
一个document的Document.readyState属性描述了文档的加载状态

一个文档的readyState可以使一下之一

   loading 加载

        document仍在加载

   interactive 互动

        文档已经完成加载，文档已经被解析，但是图像，样式表和框架之类的子资源仍然在加载

   complete  完成

        文档和所有子资源已经完成加载。状态表示load事件即将被触发