Próbuję zrozumieć, w jaki sposób spirale CSS poprawiają wydajność w witrynie?W jaki sposób sprite'y CSS przyspieszają działanie strony internetowej?
Dlaczego pobieranie kilku małych zdjęć jest wolniejsze niż pobieranie pojedynczego obrazu zawierającego mniejsze obrazy, jeśli łączny rozmiar pojedynczego obrazu jest sumą mniejszych obrazów?
Ważne jest, aby zrozumieć, dlaczego obciążenie związane z żądaniem HTTP ma taki wpływ.
W najprostszej formie żądanie HTTP polega na otwarciu gniazda, wysłaniu żądania na otwarte gniazdo i odczytaniu odpowiedzi.
Aby otworzyć gniazdo, stos protokołu TCP/IP klienta wysyła pakiet TCP SYN na serwer. Serwer odpowiada za pomocą SYN-ACK, a klient odpowiada na to za pomocą ACK.
Tak więc, zanim wyślesz jeden bajt danych aplikacji, musisz przynajmniej na pół godziny czekać na serwer.
Następnie klient musi wysłać żądanie, poczekać, aż serwer przeanalizuje żądanie, odszuka żądane dane, odeśle je - to kolejna podróż w obie strony plus część po stronie serwera (mam nadzieję, że niewielki koszt, chociaż mam zobaczyłem kilka wolnych serwerów) plus czas transmisji rzeczywistych danych, i to jest najlepszy przypadek, zakładając brak przeciążenia sieci, który spowodowałby odrzucenie pakietów i ich ponowne przesłanie.
Każda szansa, aby tego uniknąć, powinieneś.
Współczesne przeglądarki będą wysyłać wiele żądań równolegle, próbując zmniejszyć niektóre związane z tym koszty. Żądania HTTP mogą być teoretycznie wykonywane na tym samym gnieździe, dzięki czemu rzeczy są trochę lepsze. Ogólnie rzecz biorąc, podróże w obie strony są złe pod względem wydajności i należy ich unikać.
Mniejsza liczba podróży w obie strony na serwer. Zamiast 6 (powiedzmy) żądań dla 6 różnych obrazów, otrzymujesz jedno żądanie i 6 zastosowań tego samego obrazu. Jeśli serwer odpowie "nie zmieniło się od czasu ostatniego zapytania" przez większość czasu, może to oznaczać znaczne zmniejszenie natężenia ruchu sieciowego.
Ponieważ wiele obrazów wymaga wielu żądań http. Zobacz zasadę skuteczności Yahoo nr 1: Minimize HTTP Requests.
Oprócz minimalizowania liczby żądań, w zależności od obrazów, może się okazać, że rozmiar pliku jest mniejszy niż w przypadku rozdzielenia (według mnie, ze względu na zmniejszoną ilość metadanych, między innymi). Inną dodatkową zaletą korzystania z ikonek jest to, że nie masz efektu migotania, gdy po raz pierwszy najedziesz kursorem na element, który ma stan aktywowania, co może poprawić postrzeganie wydajności strony przez użytkownika. Ciekawym źródłem informacji na temat optymalizacji obrazu może być przeczytanie tego wpisu na blogu blogu Yahoo w wersji series. Po ponownym zapoznaniu się z zalecanymi praktykami Yahoo dotyczącymi wydajności, zdziwiłem się, widząc, że są one również suggested, że układanie obrazów w poziomie zamiast w pionie może również zmniejszyć rozmiar pliku.
Oprócz powyższych przyczyn, łatwiej mi z nimi pracować. Masz tylko jeden plik, który musisz zmodyfikować i przesłać oraz jeden adres URL do zmiany w kodzie, jeśli zaktualizujesz obraz.
W rzeczywistości tak nie jest - sprobowane obrazy są znacznie trudniejsze w obsłudze, ponieważ trzeba śledzić współrzędne podobrazu na głównym obrazie. – levik
Pamiętaj, że "powyżej" może się zmienić: jeśli twoja odpowiedź zostanie poddana pod głosowanie lub inni przyjdą po tobie, możesz skończyć będąc ponad innymi. Użyj nazwy użytkownika lub nazwy użytkownika podczas odwoływania się do innych komentarzy tutaj i będzie to miało sens bez względu na wszystko. –
Zrobiłem kilka numerów kilka lat temu - dla jednego 43 bajtu 1x1 GIF, obciążenie HTTP (nie wliczając w to g narzutowy pakiet TCP) przekraczało 240 bajtów. –
Można dodać, że w zależności od obrazu kompresja może być bardziej wydajna. –
Ponadto, TCP/IP jest bardziej wydajny w przypadku przesyłania większych plików. – David