Messen, wenn nur bestimmte Seitenelemente geladen wurden

Wir verwenden eine modifizierte Version von Jiffy, um die tatsächliche clientseitige Leistung zu messen.Messen, wenn nur bestimmte Seitenelemente geladen wurden

Das Wichtigste, was wir tun, ist die Zeit zwischen dem Empfang der Anforderung und dem Zeitpunkt des Ereignisses zum Laden der Seite im Browser zu messen.

Auf einigen Seiten haben wir iframe Elemente, die auf externe Seiten zeigen, die wir nicht kontrollieren - sie brauchen manchmal viel Zeit zum Laden. Im Moment wird das Seitenladeereignis für unsere Seite nur ausgelöst, nachdem die iframe vollständig geladen wurde (und das eigene Ladeereignis ausgelöst wird).

Ich mag diese Messungen trennen - hat eine Messung nach der allem, einschließlich der iframe geladen wird, sondern auch eine Messung ohne iframe - das heißt, wenn die Seite zu laden, würde aufgetreten ist, wenn wir nicht ein iframe haben .

Die einzige Möglichkeit, die ich bisher geschafft habe, ist das Hinzufügen der iframe zum DOM nach dem Seitenladeereignis, aber das verzögert das Laden des Iframe.

Irgendwelche Ideen? Vielen Dank!

EDIT: Kopfgeld ist vorbei, danke für die Hilfe und Ideen! Ich wählte Jeds Antwort, weil es mir eine neue Idee gab - fange an, die Iframes zu laden, aber "pausiere" sie so, dass sie das Seitenladen nicht beeinflussen (indem du temporär src="about:blank" setzt). Ich werde versuchen, eine detailliertere Zusammenfassung meiner Ergebnisse hinzuzufügen.

Quelle

2009-04-22 orip

Sie können ohne sie dynamisch dies für mehrere Iframes erreichen Zugabe von:

das src Attribut für alle Frames about:blank vor Körperlast Einstellung
die Körperlast Ereignis Feuer im Stich gelassen ,
Hinzufügen eines onload Handler, um die Ladezeit jedes Rahmens zu erfassen, und dann
Rest oring das src Attribut jedes Rahmens auf seinen ursprünglichen Wert.

Ich habe erstellt ein frameTimer-Modul, das von zwei Verfahren besteht:

eine init Methode, die unmittelbar vor dem </body> Tag aufgerufen werden muss, und
eine measure Methode genannt werden Seite laden, die einen Rückruf mit den Ergebnissen nimmt.

Die Ergebnisse Objekt ist ein Hash wie folgt aus:

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

Es gibt Zahlen für jede Ladezeit, aber leicht nur geändert werden, um die diff aus dem Dokument Körperlast zurückzukehren.

Hier ist ein funktionierendes Beispiel in Aktion, mit dieser JavaScript-Datei (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 ]; 
      } 
     } 
    }; 

})();

und diese HTML-Datei (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>

Das in viel getan werden könnte, weniger Code (und weniger aufdringlich) mit jQuery, aber dies ist ein ziemlich leichter und abhängigkeitsfreier Versuch.

Quelle

2009-05-01 06:34:17

Danke Jed, ziemlich cool! Ich habe kein Problem, die iframes dynamisch hinzuzufügen. Ich möchte das Laden des Iframe-Inhalts nicht verzögern, und das Setzen der src nur beim "Laden" -Ereignis des Körpers könnte dies verursachen. Auf der anderen Seite, wenn Sie es im Voraus einstellen und es vor dem Ende des body-Tags zurücksetzen, könnte der Browser tatsächlich beginnen, die Frames-Komponenten herunterzuladen, nur für das Timing des Elternteils anhalten und dann fortfahren. Könnte eine großartige Idee sein, ich muss testen, ob es funktioniert. – orip

Kein Problem orip. Sie können die Ergebnisse sehen, die hier arbeiten: http://s3.amazonaws.com/frameTimer/index.html –

Wenn Sie Ladezeiten auf dem ersten Treffer für iframe URLs suchen, müssen Sie den Browser-Cache für die Messungen deaktivieren . Wenn Sie die iframe-URLs in "frameTimer.init()" durch "about: blank" ersetzen, werden einige der iframe-URLs möglicherweise bereits zwischengespeichert und die Ladezeiten können aufgrund zwischengespeicherter URLs möglicherweise verringert werden. –

Ich bin nicht vertraut mit Jiffy per se, aber in der Vergangenheit habe ich ähnliche Messungen durchgeführt um eine rohe maßgeschneiderte Funktion, etwa wie folgt aus (5 Minuten vom Speicher eingeben):

<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>

Daraus ergibt sich, dass der relevante Teil lediglich ein Datumsstempel ist, unmittelbar bevor der Iframe gefunden wird, und dann einen Ereignishandler zum Onload-Ereignis der Iframes hinzufügt (was unabhängig von der Domäne der Iframe-Quelle funktioniert und dies nicht erfordert) Ändern des Inhalts), um eine andere Messung zu machen (normalerweise würde ich diese Ereignisse mit addEventListener/attachEvent hinzufügen, aber Sie erhalten die Idee).

Das gibt Ihnen eine Zeitspanne für den iframe, die Sie von der Summe subtrahieren können, um Ihnen eine vernünftige Vorstellung von Ladezeit mit und ohne iframe zu geben.

HTH

Quelle

2009-04-27 08:23:21 annakata

Dank annakata. Ich denke, dass page_load_time - iframe_load_time! = Page_load_time_without_iframe, weil andere Elemente parallel mit dem iframe und seinen Elementen geladen werden, aber vielleicht können wir nichts besseres tun :( – orip

Das war mein Gefühl.Die einzige kugelsichere Option besteht darin, einfach eine Version mit und ohne iFrame zu testen, wenn Sie eine grobe und bereit haben, müssen Sie mit etwas ähnlich dem oben genannten gehen. Ich denke nicht, dass sie! = Die meiste Zeit zu groß sein werden, aber es hängt von Ihrer Testplattform ab. Wenn Sie sich einem realistischen Anwendungsfall annähern, ist es sehr unwahrscheinlich, dass Sie die Bandbreite, den Arbeitsspeicher oder den Prozess einschränken. – annakata

Ich bin nicht sicher, ob es Ihnen helfen:

Wie jQuery Benutzer ich meinen Code bekommen ausgeführt lange vor dem Ereignis onLoad der Fensterbrände.

Es ist eine wesentliche Funktionalität von jQuery Verarbeitung zu ermöglichen, sobald das DOM der geladenen Seite bereit ist (siehe: jQuery Ready Event)

ich dann Event-Handler zu jedem Elemente hinzufügen kann den Laden „später“ beenden kann einschließlich der iframes.

Aber ich verstehe, dass dies nicht genug für Ihren Fall sein kann, wie Sie das Timing von "alles" haben möchten, ohne die iframes zu laden. Ich bin mir nicht sicher, was mit dem onLoad-Ereignis des Fensters passiert, wenn Sie die iframe-Quellen aus dem jQuery ready-Handler heraus setzen. Ich denke, sie werden unabhängig geladen, aber das muss überprüft werden.

Auf der anderen Seite ... zeigt diese Bereit-Funktion an, wenn Leute Ihre Seite "aufbauen" sehen. Das Laden von Bildern und Dingen ist für die Wahrnehmung von Menschen meist zweitrangig. Deshalb zeigt Windows den Desktop an, bevor er für eine Weile geladen wird :-)

Quelle

2009-05-03 13:30:24 OderWat

Gute Punkte - Ich habe dies überprüft und die Quellen des iframes auf $ (document) gesetzt. Ready hilft nicht - das Ladeereignis der Seite wird bis zum Ladeereignis des Iframes verzögert. Außerdem werden die Iframes später geladen. Das Einstellen der Quellen nach dem Laden der Seite wird (offensichtlich) das Laden der Seite nicht verzögern, verzögert aber das Laden der Iframes noch mehr. Übrigens glaube ich, dass das DOMReady-Ereignis - abhängig von der Seite - ausgelöst werden kann, nachdem die Seite mit dem Rendern begonnen hat. Zum Beispiel, wenn Sie ein langsames

Verwandte Themen