Ich versuche zu verstehen, wie CSS-Sprites die Leistung auf einer Website verbessern?Wie beschleunigen CSS-Sprites eine Website?
Warum ist das Herunterladen mehrerer kleiner Bilder langsamer als der Download eines einzelnen Bildes, das die kleineren Bilder enthält, wenn die Gesamtgröße des einzelnen Bildes die Summe der kleineren Bilder ist?
Es ist wichtig zu verstehen, warum der Overhead einer HTTP-Anfrage eine solche Auswirkung hat.
In seiner einfachsten Form besteht eine HTTP-Anfrage darin, einen Socket zu öffnen, die Anfrage an den offenen Socket zu senden und die Antwort zu lesen.
Um einen Socket zu öffnen, sendet der TCP/IP-Stack des Clients ein TCP-SYN-Paket an den Server. Der Server antwortet mit einem SYN-ACK und der Client antwortet darauf mit einem ACK.
Bevor Sie also ein einzelnes Byte an Anwendungsdaten senden, müssen Sie mindestens eine ganze anderthalb Runde auf den Server warten.
Dann muss der Client die Anfrage senden, warten, bis der Server die Anfrage analysiert, die angeforderten Daten findet, zurücksendet - das ist eine weitere Rundreise plus einige Server-Overhead (hoffentlich ein kleiner Overhead, obwohl ich gesehen einige langsame Server) plus die Zeit, die tatsächlichen Daten zu übertragen, und das ist der beste Fall, unter der Annahme, keine Netzwerküberlastung, die dazu führen würde, dass Pakete gelöscht und erneut übertragen werden.
Jede Chance, die Sie vermeiden müssen, sollten Sie.
Moderne Browser werden mehrere Anfragen parallel ausgeben, um den damit verbundenen Overhead zu reduzieren. HTTP-Anfragen können theoretisch am selben Socket durchgeführt werden, was die Dinge etwas besser macht. Im Allgemeinen sind Netzwerk-Roundtrips jedoch schlecht für die Leistung und sollten vermieden werden.
Weniger Round-Trips zum Server. Statt 6 (sagen wir mal) Anfragen für 6 verschiedene Bilder, erhalten Sie eine Anfrage und 6 Verwendungen desselben Bildes. Wenn der Server antworten wird "es hat sich seit der letzten Anfrage nicht geändert" die meiste Zeit, kann dies eine erhebliche Reduzierung des Netzwerkverkehrs bedeuten.
Da mehrere Bilder mehrere HTTP-Anforderungen erfordern. Siehe Yahoo-Leistungsregel # 1: Minimize HTTP Requests.
Neben der Minimierung der Anzahl der Anfragen kann es sein, dass die Dateigröße abhängig von den Bildern kleiner ist, als wenn sie getrennt wären (aufgrund der reduzierten Menge an Metadaten, unter anderem). Ein weiterer Vorteil von Sprites besteht darin, dass der Flimmereffekt beim ersten Mauszeiger auf ein Element mit einem Hover-Status nicht auftritt, wodurch die Wahrnehmung der Seitenleistung verbessert werden kann. Eine interessante Ressource zur Bildoptimierung, die Sie vielleicht lesen möchten, ist diese series Blogposts im Yahoo User Interface Blog. Beim erneuten Lesen der von Yahoo empfohlenen Vorgehensweisen für die Leistung war ich überrascht zu sehen, dass sie auch suggested haben, dass das Anordnen Ihrer Bilder horizontal statt vertikal die Dateigröße reduzieren kann.
Abgesehen von den oben genannten Gründen finde ich sie einfacher zu arbeiten. Sie haben nur eine Datei, die Sie ändern und hochladen müssen, und eine URL, die Sie in Ihrem Code ändern müssen, wenn Sie das Bild aktualisieren.
Das ist nicht der Fall - sprigierte Bilder sind viel schwieriger zu handhaben, da man die Unterbildkoordinaten im Hauptbild verfolgen muss. – levik
Denken Sie daran, dass sich "oben" ändern kann: Wenn Ihre Antwort gewählt wird oder andere nach Ihnen kommen, könnten Sie über den anderen stehen. Verwenden Sie den Benutzernamen oder die Benutzernamen des Benutzers, wenn Sie sich hier auf andere Kommentare beziehen, und es macht Sinn, egal was passiert. –
Ich habe ein paar Zahlen vor ein paar Jahren - für eine 43 Byte 1x1 GIF, der HTTP-Overhead (nicht einschließlich g TCP Paket Overhead) war mehr als 240 Bytes. –
Sie könnten hinzufügen, dass je nach Bild die Komprimierung effizienter sein kann. –
TCP/IP ist auch effizienter beim Übertragen größerer Dateien. – David