Question

我需要为每位访问者测量页面加载时间。我认为最好的方法是在页面中为此目的注入一个javascript。但事情有点复杂，因为我需要在页面时间内单独测量每个子请求。还需要报告发送到第三方系统（如CDN或Google）的请求的响应时间。该页面还有许多在页面加载期间执行的ajax调用。所有这些都应该被包含在页面完成事件之后，不应该包括其他周期性的ajax调用。并且所有这些测量应该被发送回服务器以便存储（？XMLHttpRequest）。以前有人做过这样的事吗？任何建议或示例脚本？

谢谢

Answer 1

编辑：虽然这是一个开始，但它并没有解决一些内容被异步加载的事实。例如，我不知道如何测量图像的加载时间。但它可用于AJAX调用。

这是你可以做到的一种方式。 http://jsfiddle.net/45Lpwhyv/

function LoadingTimer() {
    this.timestamp = null;
    this.parts = [];
}

LoadingTimer.prototype.start = function (data) {
    this.stop();
    var i = this.parts.length;
    this.parts[i] = {};
    this.parts[i].data = data;
    this.timestamp = new Date().getTime();;
};

LoadingTimer.prototype.stop = function () {
    if (this.timestamp !== null) {
        this.parts[this.parts.length - 1].duration = (new Date().getTime()) - this.timestamp;
        this.timestamp = null;
    }
};

此类允许您将数据参数传递给计时器，计时器可以是一个字符串，类似于加载的文档当前部分的名称。现在，您只需创建一个LoadingTimer实例，并为要跟踪的每个操作调用.start("sectionName")。如果您想立即停止某个部分而不立即开始新部分，请拨打.stop。

lt = new LoadingTimer();
lt.start("Time before first dialog gets closed.");
alert("Time will be checked when you will close this dialog.");
lt.start("Time before second dialog gets closed.");
alert("Let's do another one!");
lt.stop();

显然，你可以在某些时候添加额外的方法将数据传输到服务器，可能是在JSON中。

使用页面子元素测量页面下载时间和渲染时间

1 个答案: