HTTP-Anfrage - IMG vs TEXT? - Hervorragende Bibliothek

Die Timeline hier gezeigt (erfasst mit IE-F12-Entwicklertools) zeigt, wie IE eine Seite behandelt wo ein <img> Tag nach eines Bündels text befindet:HTTP-Anfrage - IMG vs TEXT?

enter image description here

Die zweite Reihe zeigt die Abruf des Bildes. Da das Bild klein ist, sind alle Bilddaten in den HTTP-Antwortheadern in demselben Paket enthalten.

jedoch - Die nächste Zeitleiste zeigt, was passiert, wenn der <img> Tag die Nähe von den Beginn der so Datei gespeichert ist, dass es von IE im ersten Datenpaket empfangen ist:

jedoch , beginnt die Anfrage für das Bild kurz nachdem das erste HTML-Paket angekommen ist.

Als Ergebnis dauert es weniger Gesamtzeit für die Seite und das Bild abzurufen

aber (IMHO) es besser ist, Bilder zu setzen (mit definierten Dimensionen) auf der Unterseite dieser Seite. (damit die Seite schneller geladen wird)

Allerdings - an meinem Beispiel zeigt es, dass die Seite schneller geladen wird, wenn der IMG oben ist.

Was fehlt mir?

P.S. meine Frage ist kurz zusammengefasst Text of this section

Quelle

2012-12-19 Royi Namir

"* ... Aber die Best Practices sagen immer, Bilder (mit definierten Dimensionen) unten auf dieser Seite zu platzieren ... *," Wer? Referenz benötigt – Alexander

@Alexander (hinzugefügt IMHO), aber die Abmessungen sollten da sein (100%). dennoch, warum ändert sich die Gesamtzeit? Bitte beachten Sie den mitgelieferten Link. –

Der Browser kann ein Bild erst herunterladen, wenn es seine URL hat. Je früher Sie die URL angeben, desto besser. Browser verwenden Strategien namens Lookahead, um Ressourcen zum Herunterladen zu identifizieren (http://blogs.msdn.com/b/ieinternals/archive/2010/04/01/ie8-lookahead-downloader-fixed.aspx). Warum ist dieser Beitrag mit "Fiddler" getaggt? Wenn Sie Fiddler ausgeführt haben, müssen Sie sicherstellen, dass das Streaming aktiviert ist (http://www.fiddler2.org).com/fiddler/hilfe/streaming.asp). – EricLaw

Ihnen fehlen mehrere Punkte. Zunächst geht es bei den Best Practices nicht nur um das Herunterladen, sondern auch um das Rendering. Wenn die gesamte Seite für 3 Sekunden heruntergeladen wird, aber weitere 2 Sekunden benötigt werden, wartet der Benutzer 5 Sekunden, nicht 3 Sekunden. Ich kenne keine Best Practice, um Bilder an die unterste Stelle zu stellen (für Skripte gibt es solche), die beste Methode, die ich kenne, ist, die Attribute width und height einzuschließen, damit Sie das Rendering nicht blockieren, während das Bild heruntergeladen wird.

Eine weitere Sache, die Sie in Ihrem Test verpassen, ist das parallele Herunterladen, da Browser die Anzahl der gleichzeitigen Verbindungen begrenzen und Sie nur mit einem Bild testen. Machen Sie Ihre Tests mit mehr Bildern oder am besten mit einer echten Webseite, um zuverlässige Ergebnisse zu erzielen.

Quelle

2012-12-19 08:54:49

Ihre Sektion ist irrelevant, da es derzeit 6 gleichzeitige Verbindungsbeschränkungen gibt und mein Beispiel nur über 2 diskutiert. Ich habe kein Problem mit "fehlenden Verbindungen, um alle Anfragen zu bearbeiten "/ –

Mein Punkt ist, dass Best Practices nicht für Ihren speziellen Fall geschrieben sind, sondern für allgemeine Fälle, in denen mehr als 6 Ressourcen geladen werden müssen. –

Trotzdem, warum lädt das zweite Beispiel in weniger Zeit? Was ist der Unterschied zwischen IMG-Text und Text-IMG? –

Ich würde lieber lessing Anzahl der Verbindungen kümmern, - Laden der ganzen Seite auf einmal. Split-Schnittstelle und Inhaltsteile. Sobald die Schnittstelle geladen ist, kann sie den Benutzer bitten, zu warten und ihn über die Verbindungsgeschwindigkeit zu informieren. Dann legen Sie einen Fortschrittsbalken und informieren Sie den Benutzer darüber, wie die Dinge laufen.

Quelle

2012-12-19 09:29:12

HTTP-Anfrage - IMG vs TEXT?

Antwort

Verwandte Themen