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()中的值。

当DOM完全加载时，

$(document).ready()为fired by jQuery。这将在窗口onLoad事件触发之前，只有在下载了所有外部内容（例如CSS和图像）后才会发生。

为了更好地显示浏览器的NavigationTiming timeline，请参阅下图：

$(document).ready()基本上在domContentLoaded之后，domComplete之前，loadEventStart和loadEventEnd之前被解雇（例如窗口的onLoad事件已经解雇了。

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

此属性必须返回当前文档的加载事件完成时的时间。如果未触发加载事件或未完成，则必须返回零。

解决方案是在loadEventEnd事件期间忽略loadEventEnd（并使用loadEventStart或事件window.performance.now()），或在{{onLoad期间忽略setTimeout(..., 0) 1}}事件并在回调期间查询性能数据，因为它将在onLoad之后，因此应填写所有时间戳。它实际上取决于什么时间戳对您来说很重要。

Answer 2

如果查看http://webtimingdemo.appspot.com/中的源代码，它运行代码AFTER onload（setTimeout（＆＃39; writeTimings（）＆＃39;，0）），您的代码将在$（document）中运行。 ready（）在onload之前运行，因为它在Chrome中的DOMContentLoaded上运行。

我已将setTimeout放入您的代码中，现在它可以正常工作：请参阅http://jsbin.com/acabo4/8

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() {

  setTimeout(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>")
  }, 100);
});

Answer 3

如果您正在使用jQuery，最简单的方法是在loadEventEnd触发时调用您的函数。

所以，替换

$(document).ready(function(){

使用：

$(window).load(function(){

太多，您在没有时序界面的浏览器中会遇到JS错误。在尝试执行之前，您需要这样的东西来验证接口是否存在。当浏览器有接口时，你上面的东西是可以的。否则，请尝试检查：

 $(window).load(function(){
     if (window.performance != undefined) {
        var e = window.performance;
        if (e.timing) {

WebTiming API中的错误值

3 个答案: