2

我正在使用新的W3C 规范中指定的通过Chrome和 IE 9公开的新webTiming API。

出于某种原因，我得到了loadEventEndas 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>");

有人可以帮我找出问题所在吗？

4

3 回答 3

5

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

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

为了更好地可视化浏览器的NavigationTiming 时间线，请参考下图： 导航计时

$(document).ready()基本上是在domContentLoaded、 之前domComplete和明显在loadEventStartand之前触发loadEventEnd（例如，窗口的onLoad事件已经触发）。

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

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

解决方案是在事件期间忽略loadEventEnd（并使用loadEventStartor event window.performance.now()）onLoad，或者setTimeout(..., 0)在onLoad事件期间并在回调期间查询性能数据，因为它将在之后onLoad填写所有时间戳。这实际上取决于时间戳对你很重要。

于 2014-01-14T15:54:49.703 回答
3

如果您查看http://webtimingdemo.appspot.com/中的源代码，它在 onload (setTimeout('writeTimings()', 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);
});
于 2011-06-19T18:55:29.017 回答
0

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

所以，更换

$(document).ready(function(){

和：

$(window).load(function(){

同样，在没有计时接口的浏览器中也会出现 JS 错误。在尝试执行之前，您需要这样的东西来验证接口是否存在。当浏览器确实有界面时，上面的内容就可以了。否则，请尝试以下检查：

 $(window).load(function(){
     if (window.performance != undefined) {
        var e = window.performance;
        if (e.timing) {
于 2013-09-26T15:03:52.103 回答