html - WebTiming API 中的错误值

Question

我正在使用新的 webTiming API通过 Chrome 暴露和新 W3C spec 中指定的 IE 9 .

出于某种原因，我得到的 loadEventEnd 为 0。这限制了我计算实际加载时间。

这是输出和代码

connectStart is: 1308411426685
responseStart is: 1308411429541
domLoading is: 1308411429548
connectEnd is: 1308411426685
domInteractive is: 1308411430023
fetchStart is: 1308411426667
secureConnectionStart is: 0
domainLookupStart is: 1308411426667
responseEnd is: 1308411429543
requestStart is: 1308411426685
loadEventEnd is: 0
domComplete is: 0
redirectStart is: 0
unloadEventEnd is: 1308411429545
domContentLoadedEventStart is: 1308411430023
domContentLoadedEventEnd is: 0
domainLookupEnd is: 1308411426667
navigationStart is: 1308411426667
unloadEventStart is: 1308411429545
loadEventStart is: 0
redirectEnd is: 0

代码:

var performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
var timing = performance.timing || {};
function getTiming(timingStr) {
    if (!timing) return 0;
    var time = timing[timingStr];
    return time;
}
var loadTime = (new Date().getTime() - getTiming("navigationStart"))/1000;
$(document).ready(function(){
    var perflist = '<ul id=perflist>';
    for(var performer in timing){
        var j = getTiming(performer);
        perflist += '<li>' + performer  + ' is: ' + j + '</li>';
    }
    perflist += '</ul>';
    $("body").prepend(perflist);
    $("#adminmenu").prepend("<li>Load time : " + loadTime + " seconds</li>");

谁能帮我找出问题所在？

Answer 1

您看到 loadEventEnd: 0(以及 loadEventStart: 0)的原因是因为您正在检查 $(document ).ready().

$(document).ready() 是 fired by jQuery当 DOM 完全加载时。这将在窗口的 onLoad 事件触发之前发生，该事件只会在所有外部内容(例如 CSS 和图像)都已下载后发生。

为了更好地可视化浏览器的 NavigationTiming timeline ，引用下图:

$(document).ready() 本质上在 domContentLoaded 之后，在 domComplete 之前，显然在 loadEventStart< 之前触发 和 loadEventEnd(例如，窗口的 onLoad 事件已触发)。

请注意，您不应该只是将代码更改为在窗口 onLoad 事件期间运行，因为 loadEventEnd 仍将是 0 during onLoad 事件。 NavigationTiming spec 中loadEventEnd 的定义是:

This attribute must return the time when the load event of the current document is completed. It must return zero when the load event is not fired or is not completed.

解决方案是在onLoad 期间忽略loadEventEnd(并使用loadEventStart 或事件window.performance.now()) 事件，或者在 onLoad 事件期间执行 setTimeout(..., 0) 并在该回调期间查询性能数据，因为它将在之后onLoad 所以所有时间戳都应该填写。这真的取决于时间戳对你来说很重要。