2011-12-02 12 views
14

Jeśli istnieje jednowymiarowe tło, które powtarza się w pewnym wymiarze, czy istnieje jakaś zauważalna różnica w wydajności, jeśli obraz jest np. Szerokość 1px a szerokość 10 lub 20 pikseli?Czy powtarzające się tła w html są bardziej wydajne, jeśli są większe niż 1 piksel?

+0

Dobre pytanie. Nigdy nie używałam szerokich obrazów 1px i z mojego doświadczenia wynika, że ​​rozmiar pliku nie staje się większy, więc nie widzę powodu, dla którego nie powinienem używać obrazów 10px. – Gerben

+0

Ktoś tutaj http://forums.devshed.com/css-help-116/background-repeat-efficiency-276824.html jest cytowany jako: –

+4

"Jest to temat, który podałem bardzo powierzchowne badanie. do rozważenia jest masa tara nagłówka odpowiedzi serwera i własny nagłówek obrazu, na przykład 1 jpg (wygenerowany przez GIMP) koloru jednolitego # 808080 ma rozmiar pliku 334 bajtów. Przy wielkości 200 × 5 rozmiar pliku wynosi 352 W przypadku wzrostu o 18 bajtów ((352 + rozmiar nagłówka serwera) ÷ (334 + rozmiar nagłówka serwera) × 100 = procentowy wzrost szerokości pasma) obciążenie płytek klienta jest zmniejszane o trzy rzędy wielkości: Moja własna opinia jest taka, że nie ma znaczącej korzyści uzyskanej dzięki zmniejszeniu rozmiaru pliku obrazu do wartości mniejszej niż 1 KB. " –

Odpowiedz

3

Zakładam, że masz na myśli dwuwymiarowe tło.

Nie mogę sobie wyobrazić, że na nowoczesnych komputerach jest jakaś zauważalna różnica. Ponieważ jednak przepustowość wciąż jest na wagę złota, szczególnie na urządzeniach mobilnych, myślę, że lepiej byłoby zachować przepustowość, powtarzając szeroki obraz o szerokości 1px zamiast o szerokości 2 lub 3 px.

AKTUALIZACJA: Właśnie przeprowadziliśmy test, nienaukowo, ale z pewnością percepcyjnie istotny, w którym jedna strona wyrenderowała 10px zielony kwadrat na 10,000,000px kwadratowym dziale, a inna strona wyrenderowała 1px zielony kwadrat na tym samym rozmiarze div. Wszystkie style są ustawione za pomocą CSS, obie strony nie mają żadnej innej zawartości. Grafika została załadowana lokalnie. W renderowaniu w przeglądarce Safari 5 dla komputerów Mac lub FireFox 8 dla komputerów Mac nie było absolutnie żadnej różnicy percepcyjnej. Mimo to możliwe, że wystąpiły problemy z wydajnością w niektórych modelach starszych (bardziej inteligentnych) smartfonów.

+0

Witamy w Stack Overflow Greg! ;) Oczywiście wszystkie obrazy są technicznie dwuwymiarowe, co rozumiem przez jeden wymiar, polega na tym, że obraz zmienia się tylko w jednym wymiarze, a zatem szerokość (lub wysokość) innego wymiaru jest nieistotna. – devios1

0

Prawdopodobnie nie zauważysz różnicy między szerokim obrazem o szerokości 1px a szerokim na 20px, chociaż taki będzie. Jest to tylko różnica w wielkości pliku, który musisz pobrać. Im większy obraz, tym większy rozmiar pliku, więc pobranie początkowo zajmuje nieco więcej czasu. Kiedy już będzie na miejscu, nie zauważysz różnicy w żaden sposób.

Powiązane problemy