动态增加图片,那页面加载时间应该怎样算

页面加载时间，具体表现跟浏览器的加载状态有关，什么时候浏览器加载状态结束，页面就加载完成。

一个页面加载时间，包括在第一次请求又带去的请求，包括图片，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 的时间,而没有加载的图片就不算.