Pytanie Renderowanie przeglądarki CSS Sprites


Wszyscy wiemy, że obrazy sprite CSS są świetne, aby zmniejszyć liczbę żądań i takich, ale co z wydajnością przeglądarki renderującej stronę z kilkoma elementami wykorzystującymi duży obraz jako tło?


12
2018-05-06 19:05


pochodzenie


Właściwie to ciekawe pytanie! - User


Odpowiedzi:


na wolniejszych maszynach wyposażonych w starsze przeglądarki (takie jak IE6 / IE7) można zauważyć znaczny spadek wydajności, gdy wielokrotnie używasz bardzo dużych obrazów na jednej stronie. Jest jeszcze ostrzejszy, gdy używasz sprite'ów do: hover states.

Musisz zmusić swoją pokusę do popychania wszystkich swoich duszków do jednego ogromnego obrazu - zastanów się, które elementy są częścią interfejsu strony internetowej / webappa i umieść je w jednym spriterze (te będą wyświetlane cały czas, podczas przeglądania). Następnie spróbuj zgrupować resztę sprite'ów w obrazy charakterystyczne dla sekcji witryny i użyć ich w razie potrzeby. Minusem jest nieco dłuższy czas ładowania (dodatkowe żądania HTTP), ale wrażenia użytkownika podczas przeglądania / przewijania strony będą znacznie wyższe.


5
2018-05-22 10:38





Musisz balansować rzeczy. Jeśli mówisz o obrazie, który będzie zawierał 1000 spritesów, to CSS będzie ogromny. Ponadto istnieje bardzo mała szansa, że ​​i tak będziesz używał wszystkich tych ikonek na tej samej stronie.


1
2018-05-06 19:11





Jak możemy sądzić z naszego doświadczenia YouTube, nie ma z tym większego problemu.

Mam nadzieję, że przeglądarka buforuje obraz w pamięci, a następnie używa go do renderowania obrazu tam, gdzie ten obraz jest potrzebny.


0
2018-05-06 19:08





Możesz zapisać znaczną liczbę żądań HTTP, konsolidując swoje obrazy w jeden lub więcej złożonych sprite'ów i używając CSS do selektywnego wyświetlania części ikonki na twojej stronie internetowej. Teraz, gdy główne przeglądarki ewoluowały na tyle, aby obsługiwać tła i pozycjonowanie CSS, więcej stron przyjmuje tę technikę wydajności. W rzeczywistości niektóre z najbardziej ruchliwych stron w Internecie używają ikonek CSS, aby zapisać żądania HTTP.

Z milionami użytkowników, Yahoo! i AOL robią wszystko, aby poprawić komfort użytkowania. Zarówno AOL.com, jak i Yahoo.com używają sprite'ów CSS, aby zapisać liczne żądania HTTP dla ich skomplikowanych interfejsów. Obie witryny używają sprite'ów CSS do selektywnego wyświetlania ikon w swoich katalogach usług, a Yahoo! używa sprite'ów również w innych miejscach.

Inną zaletą sprite'ów CSS jest to, że połączony obraz jest często mniejszy w rozmiarze pliku niż pojedyncze obrazy, pomimo dodania białych znaków między obrazami. Mniejszy rozmiar sprite'ów wynika ze zmniejszonego narzutu wielu tabel kolorów i informacji o formatowaniu wymaganych przez oddzielne obrazy. Aby zmaksymalizować dostępność i użyteczność, sprite'y CSS najlepiej nadają się do ikon lub efektów dekoracyjnych.


0
2018-05-06 19:11



Nie odpowiedziałeś na to pytanie. Pytanie dotyczyło wydajności renderowania przeglądarki, a nie przepustowości czy żądań HTTP. - Michael Myers♦