javascript - 如何使用 Javascript 确定页面加载时间？

Question

生产环境可以使用更复杂的解决方案。但是对于开发人员我这样做了：

localStorage["markTime"] = new Date().getTime();
window.location.href = window.location.href + "dev"

// browser goes off and gets new page but we have a local time where this started

<script> <!-- first line after the head tag (forgetting meta data, etc) -->
    alert(new Date().getTime() - localStorage["markTime"] + "ms");
</script>

这是否给出了下载页面所需时间的准确数字？

Answer 1

对此的传统解决方案是将第一部分放在开头head，第二部分放在结尾body。它给出了一些准确的结果，但我想这是你能得到的最好的结果。

Answer 2

没有机会在同一页面内使用 javascript 获得非常准确的结果，但我认为这是最接近它的：

var loadTime, loadEnd, loadStart = new Date().getTime();
window.onload = function() {
    loadEnd = new Date().getTime();
    loadTime = loadEnd - loadStart;
    console.log(loadTime + " ms.");
}

您应该将此代码放在头中，在所有其他内容之前。

Answer 3

http://www.webpagetest.org/是测量加载时间的绝佳资源

如果您正在寻找 javascript 解决方案，您可以使用以下脚本对时间进行排序：

<script type="text/javascript">
(function ()
{
    var startTime = new Date().getTime();
    window.setTimeout(function()
    {
        var endTime = new Date().getTime();
        alert("Page took " + (endTime - startTime) + "ms to load");
    }, 0);
})();
</script>