在 javascript 中监控单页加载时间答案

【问题标题】：Monitor single page loading times in javascript在 javascript 中监控单页加载时间
【发布时间】：2013-10-28 08:53:22
【问题描述】：

我有一个现有的单页 Web 应用程序，我无法更改其代码。一些用户抱怨应用程序性能不佳。

我想用这种方式监控加载时间：

记录点击页面的时间戳
在完成 ajax 请求和其他一些 javascript 魔术之后记录页面渲染完成的时间戳
计算两个时间戳之间的差异并将其发送回服务器。

我可以使用 jQuery 轻松完成第 1 步和第 3 步，但是我不确定执行第 2 步的最佳方法是什么？

由于这似乎是一个非常明显的场景，是否有标准工具集来执行这种监控？

【问题讨论】：

或许你可以从Navigation timing Api开始
@Teemu：扩展了一点，这对我来说似乎是一个答案（也是一个很好的答案）。 :-)
我忘了说这个解决方案也应该在 IE8 中工作。
你能在页面中添加一些“全局”的 jQuery 代码吗？
@smhg 如果它们不干扰现有代码，我可以添加其他脚本。

标签： javascript ajax monitoring performance-testing single-page-application

【解决方案1】：

这有帮助：

function onLoad() { 
  var now = new Date().getTime();
  var page_load_time = now - performance.timing.navigationStart;
  console.log("User-perceived page loading time: " + page_load_time);
}

【讨论】：

我忘了提到该解决方案也应该适用于 IE8。

【解决方案2】：

您可以使用 jQuery 提供的全局 ajaxStop 事件。

var start = +(new Date());
$(document).ajaxStop(function() {
    var diff = +(new Date()) - start;
    // do logging
});

这不包括在最后一次 AJAX 调用之后执行的代码，但如果在最后一次调用之前发生的事情包含预期的瓶颈，那么这将非常有用。

【讨论】：

【解决方案3】：

这可以通过以下方式实现...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
        var startTime, endTime, timeDifference;
        function doIt() {
            var startTime = new Date().getTime();
            $.ajax({
                type: 'post',
                url: 'a.php',
                success: function (resp) {
                    endTime = new Date().getTime();
                    timeDifference = endTime - startTime; //Time Difference is stored in milliseconds
                }
            })
        }
    </script>
</head>
<body>
<button style="position: absolute; top:60px" onclick="doIt()">start</button>
</body>
</html>

【讨论】：

我无法更改当前代码。为此，我必须在当前 ajax 调用之前和之后添加代码。

【解决方案4】：

这不是一个完美的解决方案，但是以下代码可以正常工作。当用户点击时，它会启动计时器。 checkHTML函数监控页面内容的变化。

var timeLogging = new Array();
var timeStart;

$(document).click(function() {
    initLogEvent();
});

function initLogEvent() {
    caption = $(".v-captiontext:first").text();
    timeStart = +(new Date());
    timeLogging.push(new Array(0,0));
    timeLogging[timeLogging.length - 1][0] = timeStart;
}

initLogEvent();
// Start a timer to check the changes in html
window.setInterval(checkHtml, 250);
// Start a timer to create the reports
window.setInterval(sendReport, 1000);


var html;
function checkHtml() {
    current = $("body").html();
    if (current != html) {
        html = current;
        var diff = +(new Date()) - timeStart;
        timeLogging[timeLogging.length - 1][1] = diff;
    }
}

function sendReport() {
    if (timeLogging.length > 3) {
        console.log(timeLogging);
        // Do additional stuff with the collected data
        for (i = 0; i <= timeLogging.length; i++) {
            timeLogging.shift();
        }
    }
}

【讨论】：

【解决方案5】：

您是否将所有应用程序的标记都保留在页面中，即使它是隐藏的？如果是这样，您可能会阻塞浏览器的内存。我建议学习在几年前像 Bing 和 Google 先驱一样在 localStorage 中卸载你的标记。我在发现这项技术的那天写了一篇关于它的博客，从那以后我就一直在使用它。

http://love2dev.com/#!article/Use-Local-Storage-to-Make-Your-Single-Page-Web-Application-Rock

【讨论】：