Wie kann die Leistung verbessert werden, indem mehrere Bilder in einer einzigen HTTP-Anfrage abgerufen werden?

Question

Ich erstelle eine Website in AngularJs(1.5.5), die eine Menge Bilder auf der Seite hat. Um diese Bilder zu zeigen, mache ich eine HTTP-Anfrage pro Bild. Gibt es eine Möglichkeit, alle Bilder mit einer einzigen HTTP-Anfrage zu erhalten?

Ich bin bewusst, css Sprites und ich kann das nicht verwenden, da es viele Bilder wie Mitarbeiter Bilder eines Unternehmens gibt und kann kein Sprite für diese erstellen.

Es läuft ein Knotenserver, von dem die Bilder abgerufen werden.

Answer 1

Verwenden Sie HTTP/2.

Sie können nicht mehrere Bilder in einer einzigen Anfrage anfordern, aber sie hält die Verbindung zum Webserver offen und ermöglicht das Multiplexen mehrerer Bildanforderungen.

Answer 2

Ohne die Verwendung von CSS-Sprites wäre die einzige Option, die ich mir vorstellen kann, 64 Bilder zu kodieren und sie als Daten-URLs in den HTML-Code aufzunehmen. Dies würde sie technisch auf 0 Aufrufe an den Webserver reduzieren!

Ob nun die HTML-Größe stark zu erhöhen, um die Anzahl der Serveranforderungen zu reduzieren, ist etwas, was ich ohne weitere Informationen über das Seiten-Design usw. nicht beantworten konnte, also etwas, das Sie testen müssten.

Ich +1 den Vorschlag der Verwendung von HTTP/2 einige in Browser-Tests, die ich gesehen habe, hat es eine Steigerung der Leistung 30-400%!

Wenn diese Optionen nicht möglich sind, um einige andere Dinge zu berücksichtigen, dass mit der Leistung auf die Frage, ob nicht direkt helfen würde:

• Apache/nginx hat der Zugang zum Google Page Speed-Modul, das automatisch optimiert Bilder, unter vielen anderen Dingen, vielleicht gibt es etwas Ähnliches für Knoten?

• Sie könnten ein CDN verwenden, um die Serving-Leistung zu erhöhen. (Insbesondere wenn Sie über geografisch verteilte Benutzer verfügen)

• Eine große Anzahl von Bildern allein ist nicht unbedingt ein Grund, CSS-Sprites nicht zu verwenden. Je nachdem, wie die Bilder verwendet werden, könnte dies eine gute Lösung sein ein serverseitiges Skript zu haben, das die Sprites/CSS für Sie als Teil des Build-Prozesses, als Teil des Image-Upload-Prozesses oder sogar auf Anforderung der Benutzeranforderungen generiert. Die zusätzliche Erstellungszeit des Kompilierens der Bilder/Bereitstellen des zwischengespeicherten kompilierten Blattes kann einige Zeiteinsparungen bieten.