Ошибочные значения в WebTiming API - PullRequest
Новая
       43

Ошибочные значения в WebTiming API

2 голосов
/ 19 июня 2011

Я использую новый webTiming API , предоставляемый через Chrome и IE 9, указанные в новой W3C спецификации .

По какой-то причине я получаю 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>");

Может ли кто-нибудь помочь мне понять, что случилось?

Ответы [ 3 ]

4 голосов
/ 14 января 2014

Причина, по которой вы видите loadEventEnd: 0 (а также loadEventStart: 0 в этом отношении), заключается в том, что вы проверяете значение в $(document).ready().

$(document).ready() - это , запускаемое jQuery , когда DOM полностью загружен. Это будет до запуска события onLoad окна, которое произойдет только после загрузки всего внешнего контента (например, CSS и изображений).

Для лучшей визуализации браузера Временная шкала NavigationTiming , см. Изображение ниже: NavigationTiming

$(document).ready() запускается по существу после domContentLoaded, до domComplete и явно до loadEventStart и loadEventEnd (например, сработало событие onLoad окна).

Обратите внимание, что вы не должны просто изменять свой код для запуска во время события окна onLoad, так как loadEventEnd все равно будет 0 во время события onLoad. Определение loadEventEnd в спецификации NavigationTiming :

Этот атрибут должен возвращать время завершения события загрузки текущего документа. Он должен возвращать ноль , когда событие загрузки не запущено или не завершено .

Решение состоит в том, чтобы игнорировать loadEventEnd (и использовать loadEventStart или событие window.performance.now()) во время события onLoad, или setTimeout(..., 0) во время события onLoad и запрашивать данные о производительности во время этого обратного вызова , как это будет после onLoad, поэтому все отметки времени должны быть заполнены. Это действительно зависит от того, какие отметки времени имеют для вас значение.

3 голосов
/ 19 июня 2011

Если вы посмотрите на исходный код в http://webtimingdemo.appspot.com/, он запускает код ПОСЛЕ загрузки (setTimeout ('writeTimings ()', 0)), ваш код работает в $ (document) .ready (), который выполняется перед загрузкой, так как он работает на DOMContentLoaded в Chrome.

Я поместил 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);
});
0 голосов
/ 26 сентября 2013

Если вы используете jQuery, самый простой способ - вызвать вашу функцию при запуске loadEventEnd.

Итак, замените 

$(document).ready(function(){

на: 

$(window).load(function(){

Также вы получите ошибки JS в браузерах, которые не имеют интерфейса синхронизации.Вам нужно, чтобы что-то подобное проверяло, что интерфейс существует, прежде чем пытаться выполнить.То, что у вас есть выше, нормально, когда браузер имеет интерфейс.В противном случае попробуйте это для проверки: 

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