Mesure lorsque seulement certains éléments de la page ont été chargés

Nous utilisons une version modifiée de Jiffy pour mesurer les performances réelles côté client.Mesure lorsque seulement certains éléments de la page ont été chargés

La chose la plus importante que nous faisons est de mesurer le temps entre le moment où la demande a été reçue et le moment où l'événement de chargement de la page se déclenche dans le navigateur.

Sur certaines pages, nous avons iframe éléments qui pointent vers des sites externes que nous ne contrôlons pas - ils prennent parfois beaucoup de temps à charger. À l'heure actuelle, l'événement de chargement de page pour notre page se déclenche uniquement après le iframe est complètement chargé (et ses propres incendies d'événement de charge).

Je voudrais séparer ces mesures - ont une mesure après tout, y compris le iframe est chargé, mais aussi une mesure sans iframe - qui est, lorsque la charge de la page aurait eu lieu si nous ne disposions pas d'un iframe .

La seule façon que j'ai réussi à faire jusqu'à présent est d'ajouter le iframe au DOM après l'événement de chargement de la page, mais cela retarde le chargement de l'iframe.

Des idées? Merci!

EDIT: la générosité est finie, merci pour l'aide et les idées! J'ai choisi la réponse de Jed parce qu'elle m'a donné une nouvelle idée - commencer à charger les iframes, mais les "mettre en pause" afin qu'elles n'affectent pas le chargement de la page (en réglant temporairement src="about:blank"). Je vais essayer d'ajouter un résumé plus détaillé de mes résultats.

Source

2009-04-22 orip

Vous pouvez y parvenir plusieurs iframes sans les ajouter dynamiquement par:

définissant l'attribut src pour toutes les images à about:blank avant la charge corporelle,
laisser l'événement charge du corps incendie
en ajoutant un gestionnaire onload pour capturer le temps de chargement de chaque trame, puis
reste oring l'attribut src de chaque trame à sa valeur d'origine.

J'ai créé un module frameTimer qui se compose de deux méthodes:

une méthode init qui doit être appelé immédiatement avant la balise </body> et
une méthode measure être appelée sur chargement de la page, qui prend un rappel avec les résultats.

L'objet de résultats est un hachage comme ceci:

{ 
    iframes: { 
     'http://google.co.jp/': 1241159345061, 
     'http://google.com/': 1241159345132, 
     'http://google.co.uk/': 1241159345183, 
     'http://google.co.kr/': 1241159345439 
    }, 
    document: 1241159342970 
}

Il retourne des entiers pour chaque temps de chargement, mais pourrait facilement être modifié pour revenir juste le diff de la charge du corps du document.

Voici un exemple de travail de celui-ci dans l'action, avec ce fichier javascript (frameTimer.js):

var frameTimer = (function() { 
    var iframes, iframeCount, iframeSrc, results = { iframes: {} }; 

    return { 
     init: function() { 
      iframes = document.getElementsByTagName("iframe"), 
      iframeCount = iframes.length, 
      iframeSrc = []; 

      for (var i = 0; i < iframeCount; i++) { 
       iframeSrc[i] = iframes[i].src; 
       iframes[i].src = "about:blank"; 
      } 
     }, 

     measure: function(callback) { 
      results.document = +new Date; 

      for (var i = 0; i < iframeCount; i++) { 
       iframes[i].onload = function() { 
        results.iframes[ this.src ] = +new Date; 
        if (!--iframeCount) 
         callback(results) 
       }; 

       iframes[i].src = iframeSrc[ i ]; 
      } 
     } 
    }; 

})();

et ce fichier html (frameTimer.html):

<html> 
    <head> 
     <script type="text/javascript" src="frameTimer.js"></script> 
    </head> 
    <body onload="frameTimer.measure(function(x){ alert(x.toSource()) })"> 
     <iframe src="http://google.com"></iframe> 
     <iframe src="http://google.co.jp"></iframe> 
     <iframe src="http://google.co.uk"></iframe> 
     <iframe src="http://google.co.kr"></iframe> 
     <script type="text/javascript">frameTimer.init()</script> 
    </body> 
</html>

Cela pourrait se faire dans beaucoup moins de code (et moins de manière gênante) avec jQuery, mais c'est une tentative assez légère et sans dépendance.

Source

2009-05-01 06:34:17

Merci Jed, plutôt cool! Je n'ai aucun problème à ajouter les iframes dynamiquement. Je ne veux pas retarder le chargement du contenu de l'iframe, et régler le src uniquement sur l'événement "load" du corps pourrait provoquer cela. D'un autre côté, le paramétrer à l'avance puis le réinitialiser avant la fin de la balise body pourrait en fait inciter le navigateur à télécharger les composants des frames, s'arrêter juste pour le timing du parent, puis continuer. Pourrait être une bonne idée, je vais devoir tester pour voir si cela fonctionne. – orip

Pas de problème orip. Vous pouvez voir les résultats fonctionnant ici: http://s3.amazonaws.com/frameTimer/index.html –

Si vous recherchez des temps de chargement sur le premier hit pour les URL iframe, vous devez désactiver le cache du navigateur pour les mesures . Sinon, lorsque vous remplacez les URL iframe par "about: blank" dans 'frameTimer.init()', certaines URL iframe peuvent déjà être mises en cache et les temps de chargement peuvent diminuer en raison d'URL en cache. –

Je ne suis pas familier avec tournemain en soi, mais dans le passé, je l'ai fait des mesures similaires en utilisant une fonction sur mesure brute, à peu près comme celui-ci (à 5 minutes de frappe de la mémoire):

<html> 
    <head> 
     <script> 
     var timer = { 
      measure: function(label) 
         { 
          this._timings[label] = new Date(); 
         }, 
      diff:  function(a,b) 
         { 
          return (this._timings[b] - this._timings[a]); 
         }, 
      _timings: {} 
     } 
     </script> 
    </head> 
    <body onload="alert(timer.diff('iframe.start','iframe.done'));"> 
     <!-- lorem ipsum etc --> 
     <script>timer.measure('iframe.start');</script> 
     <iframe src="http://www.google.com" onload="timer.measure('iframe.done');"/> 
     <!-- lorem ipsum etc --> 
    </body> 
</html>

De cela, vous pouvez voir la partie pertinente est simplement de noter un datestamp immédiatement avant que l'iframe est rencontré, puis ajouter un gestionnaire d'événements à l'événement onload des iframes (qui fonctionnera indépendamment du domaine de la source iframe et ne nécessite pas modifier le contenu) pour prendre une autre mesure (normalement j'ajouterais ces événements avec addEventListener/attachEvent mais vous avez l'idée). Cela vous donne un laps de temps pour l'iframe que vous pouvez soustraire du total pour vous donner une idée raisonnable de loadtime avec et sans iframe.

HTH

Source

2009-04-27 08:23:21 annakata

Merci annakata. Je pense que page_load_time - iframe_load_time! = Page_load_time_without_iframe, parce que d'autres éléments sont chargés en parallèle avec l'iframe et ses éléments, mais peut-être que nous ne pouvons rien faire de mieux :( – orip

C'était mon sentiment.La seule option pare-balles est de simplement tester une version avec et sans iframe, si vous voulez un rough et prêt, vous devez aller avec quelque chose de similaire à ce qui précède. Je ne pense pas qu'ils seront trop grands la plupart du temps mais cela dépend de votre plateforme de test. Sur tout ce qui se rapproche d'un cas d'utilisation réaliste, il est très peu probable que vous gâchiez la bande passante, la mémoire ou le processus. – annakata

Je ne sais pas si cela vous aidera à:

En tant qu'utilisateur jQuery je reçois mon code exécuté bien avant l'événement onLoad des feux de fenêtre.

Il est une fonctionnalité essentielle de jQuery pour permettre le traitement dès que le DOM de la page chargée est prêt (voir: jQuery Ready Event)

Je peux ensuite ajouter des gestionnaires d'événements à chaque élément qui peut terminer le chargement « plus tard » y compris les iframes.

Mais je comprends que cela peut ne pas être suffisant pour votre cas car vous voulez avoir la synchronisation de "tout" comme sans le chargement des iframes. Je ne suis pas sûr de ce qu'il advient de l'événement onLoad de la fenêtre si vous définissez les sources iframe sur le gestionnaire prêt pour jQuery. Je suppose qu'ils vont charger indépendamment, mais cela doit être vérifié. De l'autre côté ... cette fonction prête montre quand les gens verront votre page "se construire". Le chargement des images et des choses est principalement secondaire pour la perception des humains. C'est pourquoi Windows affiche le bureau avant qu'il ne soit fini de le charger :-)

Source

2009-05-03 13:30:24 OderWat

Bons points - Je l'ai vérifié et la définition des sources iframe sur $ (document) .ready n'aide pas - l'événement de chargement de la page sera retardé jusqu'à l'événement de chargement de l'iframe. En outre, cela provoque le chargement des iframes plus tard. La définition des sources après le chargement de la page ne retardera pas le chargement de la page (de toute évidence), mais retardera le chargement des iframes. BTW, je crois que l'événement DOMReady - en fonction de la page - peut se déclencher après le rendu de la page. Par exemple, si vous avez un

Questions connexes

Mesure lorsque seulement certains éléments de la page ont été chargés

Répondre

Questions connexes