Obrazy w przeglądarkach wydajność dla background-repeat CSS

Question

Czy ktoś wie, który będzie lepiej na czas załadunku przeglądarka między tymi dwiema opcjami:

background-image:url('1by1px.png'); 

lub

background-image:url('10by10px.png'); 

1px przez 1px półprzezroczyste png powtórzone dla div. Albo większy mówi 10px na 10px.

Musi istnieć pewien rodzaj pętli, który należy wykonać, aby wyświetlić powtarzający się obraz w przeglądarce, a więc zastanawiałem się, czy obraz, który jest 1px by 1px powoduje dużo pętli, aby uzyskać obraz wyświetlany, że może on w rzeczywistości być mniej szybki niż większy obraz z mniejszym zapętleniem?

Oczywiście argumentem licznika jest rozmiar obrazu jest mniejszy dla 1by1 w porównaniu do 10by10, ale nie oznacza, że ​​lepiej być mniejszy, ponieważ pętla wielokrotnie może nie skalować się tak dobrze, jak pętla dużego rozmiaru obrazu nieco rzadziej.

Czy ktoś wie więcej o tym, który byłby lepszy i jak przeglądarki radzą sobie z takimi sytuacjami?

Answer 1

Gdy nie powtarza się obrazu tła, czas renderowania zależy tylko od ostatecznego skalowanego obrazu, a nie od pierwotnego.

Obraz w pliku jest skompresowany w formacie PNG, ale po załadowaniu przez przeglądarkę jest w formacie bitmapy RGBA (4 bajty na piksel). Podczas powtarzania tła (powiedzmy na Intel x86), natywny kod przeglądarki używałby REP MOVSD do przenoszenia danych bitmapowych z pamięci RAM do pamięci wideo (jest to standardowa sekwencja, może być różna w różnych implementacjach sterownika karty graficznej lub określony GPU).

Załóżmy, że wymiary DIV HTML, które zawierają tło, to 100x100.

Dla obrazu tylko 1 piksela: program przeglądarki musi wykonać 10 tysięcy instrukcji "REP MOVSD".

Dla obrazu 10x10: przy każdym powtarzającym się obrazie, program przeglądarki musi wykonać polecenie "REP MOVSD" tylko 10 razy (1 wywołanie czasu na "REP MOVSD" może wyrenderować 1 pikselową linię (wiersz w pikselach) obrazu). Tak więc w tym przypadku liczba wykonanych instrukcji "REP MOVSD" będzie tylko 10x100 razy (10 razy na 1 obraz, 100 powtarzanych obrazów). To zajmuje całkowicie 1 tys. "REP MOVSD".

W związku z tym ostateczne tło oparte na większym obrazie będzie renderowane szybciej.

Więcej informacji: Powyższe wyjaśnienie nie oznacza, że ​​wydajność jest dokładnie 10 razy lepsza dla obrazu 10x10. "REP MOVSD" (na przykład CX = 9999) to tylko jedna instrukcja pojedynczego procesora, ale nadal wymaga przesłania 9999x4 bajtów przez magistralę danych. Jeśli używasz 9999 prostych "MOV, tyle danych wciąż musi przejść przez" magistralę danych, jednak procesor musi wykonać 9998 instrukcji więcej. Bardziej inteligentna przeglądarka tworzy wstępnie renderowaną bitmapę dla tła z replikowanymi obrazami; więc za każdym razem, gdy musi przenieść się do pamięci wideo, potrzebuje tylko 100 "REP MOVSD" (100 to liczba rzędów pikseli na ostatnim tle, zakładanym powyżej) zamiast 10 tysięcy lub 1 tys.

Answer 2

Zgadzam się z odpowiedzią Pawła. Niedawno zrobiłem kilka trudnych testów z narzędziem dla programistów Google Chrome. Użyłem różnych rozmiarów półprzezroczystych obrazów PNG na obrazie tła i używam czasu malowania strony, aby zobaczyć, ile czasu zajmuje odświeżenie ekranu.

Oto wynik:

Czas odświeżania bez -webkit transformaty siekać (w zaokrągleniu):

2x2 obrazu: 65-160ms

10x10 graficznych: 60-150ms

Obraz 100x100: 55-135ms

1000x1000 obraz: 55-130ms

Czas odświeżania z -webkit transformaty siekać (w zaokrągleniu):

2x2 obrazu: 40-120ms

10x10 obraz: 30- 90ms

Obraz 100x100: 30-90ms

1000x1000 obraz: 30-90ms

Podobnie jak to, co powiedział Paul, większy obraz jest wziąć krótszy czas ładowania (Odśwież), niż mniejszym obrazie. Wygląda na to, że staje się coraz mniej skuteczny, gdy obraz staje się większy niż 10 pikseli. Nie widzę dużej różnicy między 100x100 a 1000x1000.

Moim zdaniem, olbrzymi obraz nie daje zauważalnych rezultatów i może wydłużyć czas ładowania. Myślę więc, że każdy rozmiar około 10 - 100 jest wystarczająco dobry dla wydajności i czasu ładowania.

Mimo to różne wyniki mogą mieć różne wyniki, dlatego warto przetestować witrynę za pomocą narzędzia do malowania strony w narzędziu programistycznym Google Chrome, aby uzyskać dokładne wyniki.