美文网首页
domcontentload 和load区别

domcontentload 和load区别

作者: 小银 | 来源:发表于2019-08-16 11:17 被阅读0次

1.domcontentload 就是指当前文档完全加载完

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
      <script src="./test.js"></script>
      <script defer src="./loadtest.js"></script>
      <script async src="./test2.js"></script>
    <style>
      .fmp {
        background: #ccc;
      }
    </style>
  </head>

  <body>
    <div class="fmp ">
    </div>
    </script>
  </body>
</html>

loadtest.js代码如下

function loadscript(url) {
    var script = document.createElement("script");

    script.src = url;
    document.body.appendChild(script);
}
    loadscript('d3.js')

在这段代码里可以理解成解析到html结束位置才算domcontentload节点。
代码中3个js的引用 async的下载和解析时间是不计算到 domcontentload时间里的。动态插入的js引用(这里应该包括所有动态引入资源)统计也不算在domcontentload时间点里。

2.load

load是指当前环境所有资源加载完,包括动态的 图片资源,css,js,视频 音频。
loadtest.js改造下

function loadscript(url) {
    var script = document.createElement("script");

    script.src = url;
    document.body.appendChild(script);
}
   setTimeout(function(){
    loadscript('d3.js')

},2500)

假设当前dom所有资源加载完后(除了d3.js),时间在2500。而在2500(假设刚好在2500)有发起了D3的请求那么这个d3加载也在load统计内,既2500+d3加载时间。如果其他资源加载完时间在2000,那么d3时间不在统计内,既2000。这里每个浏览器间隔判断应该是不一样的,没找到相关标准,印象中chrome这里的时间是50ms。有知道的朋友可以告知下。

如果代码中存在各种异步资源加载,而且网络环境不稳定,那么load在不同网络环境下的值可能会千差万别。

相关文章

网友评论

      本文标题:domcontentload 和load区别

      本文链接:https://www.haomeiwen.com/subject/vcrfsctx.html