如何测试一个html完全载入图片所需的时间

Question

整个过程大概这样：
1.点击提交按钮 (此时开始计时)，js代码将html中的数据传到服务器
2.数据提交至后台java代码处理，处理完毕后，将图片完全显示在html中（此时计时结束）以下是点击提交按钮对应的javascript：function exportChartByPost(){
var endPointValue = document.getElementById("endPoint").value;//获取html中的数据
var reqFormEl = document.getElementById("reqForm");
reqFormEl.action = endPointValue;
reqFormEl.submit();//数据提交至服务器的java代码继续处理，处理后图片显示在网页上
}应该如何在该段javascript中添加代码计算：从点击按钮到图片完全显示在页面上所花的时间

Answer 1

用firebug的网络模块应该能看到

Answer 2

其实这里并不需要表单,只需要将要传递的数据以get请求的形式发送到服务器即可，因为你的java处理程序始终返回图片的MIME类型。下面的例子，你修改一下img的url即可。
这里获取的时间差是指开始加载到图片下载完成，没有包括浏览器呈现的时间。
基本上可以认为是图片在网络中传输的时间<script src="EventUtility.js" type="text/javascript">
    
    //<![CDATA[        var EventUtility = {
            "addHandler": function (element, eventName, handler) {
                if (typeof element.addEventListener === "function")
                    element.addEventListener(eventName, handler, false);
                else if (typeof element.attachEvent === "object")
                    element.attachEvent("on" + eventName, handler);
                else
                    element["on" + eventName] = handler;
            }
        };
//]]>
    
    </script>
    <script type="text/javascript">
    //<![CDATA[        function downloadImage() {
            var loading, loaded = null;
            var img = document.createElement("image");
            EventUtility.addHandler(img, "error", function () { alert("加载图片时出错"); });
            EventUtility.addHandler(img, "load", function () {
                loaded = new Date();
                alert("获取数据耗时：" + (loaded.valueOf() - loading.valueOf()) + "毫秒");
            });
            loading = new Date();
            img.src = "http://pic.dinghao.cn/article/1/463.jpg";
            document.body.appendChild(img);
        };        downloadImage();    //]]>
     
    </script>

Answer 3

我用chrome的调试工具测试了一下，发现和chrome的统计这张图片的网络传输时间正好一致。