动态增加图片,那页面加载时间应该怎样算
页面加载时间，具体表现跟浏览器的加载状态有关，什么时候浏览器加载状态结束，页面就加载完成。
一个页面加载时间，包括在第一次请求又带去的请求，包括图片，css, script，其中，css, script 会影响加载 dom 时间,会阻塞 dom 解析直到 css 和 script 下载完,它们会影响 DOMContentLoaded 的时间.
而图片，不影响 dom 时间，但却影响 page load 时间。
如果：lasyLoad 加载图片，如果我们把脚本放在后面，当页面可见时，lasyLoad 生效，这时图片会影响页面的加载时间，不会影响 dom 时间。
那么倒底什么时候,通过脚本修改 img 对象的 src 属性下载图片的时间,不算在 load 事件中呢?
我做了以下试验,代码如下:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面性能收集信息上报的demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="nico 0.5.1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script>
window._perfEnable_ = true;
</script>
</head>
<body style="height:2000px; scroll:auto">
<a >
<img src="http://img13.static.yhbimg.com/goodsimg/2016/04/23/07/02096525430e4340f60f23eb386ed54e90.jpg?imageView/2/w/235/h/314" style="display: block;">
</a>
<img id="ok">
<script>
// 算在 load 时间中
var a = document.getElementById('ok');
a.src = 'http://img3.redocn.com/20130721/Redocn_2013072117021023.jpg';
// 算在 load 时间中
setTimeout(function() {
var a = document.getElementById('ok');
a.src = 'http://img3.redocn.com/20130721/Redocn_2013072117021023.jpg';
}, 0);
// 如果短于 'DOMContentLoaded', 算在 load 时间中
setTimeout(function() {
var a = document.getElementById('ok');
a.src = 'http://img3.redocn.com/20130721/Redocn_2013072117021023.jpg';
}, 2000);
// 如果长于 'DOMContentLoaded', 算在 load 时间中
setTimeout(function() {
var a = document.getElementById('ok');
a.src = 'http://img3.redocn.com/20130721/Redocn_2013072117021023.jpg';
}, 11000);
// 算在 load 时间中
window.addEventListener('DOMContentLoaded', function() {
var a = document.getElementById('ok');
a.src = 'http://img3.redocn.com/20130721/Redocn_2013072117021023.jpg';
});
// 不算在 load 时间中
window.addEventListener('load', function(ev) {
var a = document.getElementById('ok');
a.src = 'http://img3.redocn.com/20130721/Redocn_2013072117021023.jpg';
})
</script>
<script src="perf.js"></script>
</html>
代码中的注释也很清楚了,只在你的加载图片代码出现在 DOMContentLoaded 事件发生之前,都会被计算成 load 的时间.
那对于我来说, lasyLoad 的首屏加载图片时间是算 load 的时间,而没有加载的图片就不算.