Valeurs erronées dans l'API WebTiming

Question

J'utilise le nouveau API webTiming exposé par Chrome et IE 9 spécifiés dans la nouvelle Spécification du W3C .

Pour une raison quelconque, je reçois le loadEventEnd comme 0 . Cela m'empêche de calculer le temps de chargement réel.

Voici le résultat et le code

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

Code :

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>");

Quelqu'un peut-il m'aider à comprendre ce qui ne va pas ?

Answer 1

La raison pour laquelle vous voyez loadEventEnd: 0 (ainsi que loadEventStart: 0 d'ailleurs), c'est parce que vous vérifiez la valeur dans le champ $(document).ready() .

$(document).ready() est tiré par jQuery lorsque le DOM est entièrement chargé. Ce sera avant que la fenêtre onLoad qui ne se produira que lorsque tout le contenu externe (par exemple, les CSS et les images) aura été téléchargé.

Pour une meilleure visualisation de l'interface du navigateur NavigationTiming chronologie Voir l'image ci-dessous :

$(document).ready() est déclenché essentiellement après domContentLoaded avant de domComplete et clairement avant loadEventStart et loadEventEnd (par exemple, la fenêtre onLoad a été déclenché).

Notez que vous ne devez pas simplement modifier votre code pour qu'il s'exécute pendant la fenêtre onLoad l'événement, comme loadEventEnd sera toujours 0 pendant le site onLoad événement. La définition de loadEventEnd dans le NavigationTiming spec est :

Cet attribut doit renvoyer l'heure à laquelle l'événement de chargement du document actuel est terminé. Il doit retourner zéro lorsque l'événement de chargement n'est pas déclenché ou est non terminé .

La solution est d'ignorer loadEventEnd (et utiliser loadEventStart ou événement window.performance.now() ) pendant le onLoad l'événement, ou, pour setTimeout(..., 0) pendant le onLoad et interrogez les données de performance pendant ce rappel, comme ce sera le cas après l'évènement onLoad donc tous les timestamps doivent être remplis. Cela dépend vraiment de l'importance que vous accordez aux horodatages.

Answer 2

Si vous regardez le code source dans http://webtimingdemo.appspot.com/ il exécute le code APRES onload (setTimeout('writeTimings()', 0)), votre code s'exécute dans $(document).ready() qui s'exécute avant onload car il s'exécute sur DOMContentLoaded dans Chrome.

J'ai mis un setTimeout dans votre code et maintenant cela fonctionne : Voir 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

Si vous utilisez jQuery, le plus simple est d'appeler votre fonction lorsque le loadEventEnd se déclenche.

Alors, remplacez

$(document).ready(function(){

avec :

$(window).load(function(){

De même, vous obtiendrez des erreurs JS dans les navigateurs qui ne disposent pas de l'interface de synchronisation. Vous voudrez quelque chose comme ceci pour valider que l'interface existe avant d'essayer d'exécuter. Ce que vous avez ci-dessus est correct si le navigateur dispose de l'interface. Sinon, essayez ceci pour votre vérification :

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