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

【问题标题】：Measure page download time and render time with page subelements使用页面子元素测量页面下载时间和渲染时间
【发布时间】：2015-06-18 23:11:10
【问题描述】：

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

谢谢

【问题讨论】：

标签： javascript ajax performance

【解决方案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。

【讨论】：

（哦，我特此将这段代码发布在公共领域，并不是说它值多少钱）
我认为这可能适用于 ajax 调用。但是如何测量 html 元素的加载，如 jpg、js、css、png 等。
创建一个计时器并在头顶的脚本标记中启动它，然后在正文末尾的另一个脚本标记中停止该计时器。
是的，但是如果我想单独测量所有 jpeg 的单独元素等怎么办。然后我必须在 jpeg 代码之前和之后打开脚本标签？浏览器是否以与 html 页面中相同的顺序加载它们？或者它在尝试加载 jpeg 之前运行脚本？我认为您的回答很好，但我想获得更多信息，请不要误会我的意思。我还阅读了现代浏览器中的 Navigation Timing API。是否可以在不在整个页面上插入计时器标签的情况下做到这一点？
你知道吗，我什至不认为这适用于图像，因为浏览器以异步方式加载图像，即使它确实有效，它也会产生非常草率的代码。我不知道该怎么做。