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在不同网络环境下的值可能会千差万别。
网友评论