2

我有一个无法更改代码的现有单页 Web 应用程序。一些用户抱怨该应用程序的性能不是很好。

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

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

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

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

4

5 回答 5

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);
}
于 2013-10-28T09:02:42.860 回答
1

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

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

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

于 2013-10-28T10:44:26.043 回答
0

这不是一个完美的解决方案，但是以下代码正在运行。当用户点击时，它会启动计时器。该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();
        }
    }
}
于 2013-10-28T14:23:54.753 回答
0

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

<!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>
于 2013-10-28T09:00:21.147 回答
0

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

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

于 2013-11-08T04:10:22.770 回答