2011-09-12 9 views
5

Praktyką, której zwykle używam przy manipulowaniu treścią na stronach internetowych, jest bezwzględne pozycjonowanie elementów z lewą (lub czasami górną) wartością około -2000 pikseli, aby nie było widać na ekranie.Czy jest kara pieniężna za "ukrywanie" przedmiotów poza ekranem za śmieszne kwoty?

Teraz wiem, że mogę użyć display: none, aby moje obiekty zniknęły, ale niektóre elementy nie grają przyjemnie, gdy nie są wyświetlane, a czasami muszę podać odniesienie do jakiejś własności, np. Jej szerokości, na przykład, która może można uzyskać dostęp, gdy właściwość display jest ustawiona na none. Tak często ustawiam element tak, aby był ukryty na ekranie.

Moje założenie jest więc tak:

Ponieważ obiekt nie jest wyświetlana na ekranie nie powinno być żadnej różnicy w wydajności strony * Gdy używam left: 2000px w przeciwieństwie do left: 200000000px.

Zakładam więc, że jeżeli jest używany następujący kod, nie byłoby żadnej różnicy w wydajności obu stron:

pierwszej strony:

<div style="height:100px; width:100px; left:-2000px"></div> 

Strona druga:

<div style="height:100px; width:100px; left:-200000000px"></div> 

Czy moje założenia są prawidłowe? Gdyby ten element był jedyną różnicą między dwiema stronami, czy występowałaby jakakolwiek różnica (jakkolwiek mała) w wydajności?

* To znaczy czas ładowania, rozmiar strony, elastyczność, lub jakąkolwiek inną miarą wydajności

======================= ==========

Aktualizacja

mam profilowane strony sugerowane przez Michaela i stwierdził, co następuje: Spark był rację mówiąc, że czas ładowania będzie mieć wpływ na wielkość pliku. Wystąpiła różnica czterech bajtów w rozmiarze pliku, który odpowiadał różnicy około 4ms w czasie ładowania.

Po drugie, moja niesamowicie duża lewa wartość została poprawnie zinterpretowana przez przeglądarki IE i Firefox, ale nie przez Chrome. Wygląda na to, że Chrome nie rozpoznaje wartości większych niż około 135 milionów pikseli. Biorąc jednak pod uwagę, że różnica w wydajności wydaje się być minimalna, nie mogę spekulować, dlaczego zdecydowali się ją ograniczyć do takiej arbitralnej kwoty.

+0

Można również użyć 'visiblity: hidden;' jeśli chcesz ukryć element bez utraty możliwości uzyskania informacji o metryki. –

+0

@Rob, ale nie jest widoczna: ukryte zachować element w przepływie DOM? W związku z tym wpływa na układ elementów wokół niego? –

Odpowiedz

6

Możesz spróbować ustawić czas wczytywania strony za pomocą narzędzia Firebug (lub Chrome/Safari Developer), ale byłbym bardzo zaskoczony, gdyby była jakakolwiek różnica. Przeglądarka dba o x, y, z coords elementu. Nie ma znaczenia, czy są one na ekranie, czy poza nim; wciąż są to tylko trzy dyskretne punkty danych.

+1

+1 za profilowanie –

3

Kiedy mówisz o wydajności, masz na myśli czas ładowania?

Czas ładowania CSS może zostać osiągnięty, jeśli można zmierzyć różnicę w pozostawionych bajtach: -2000px vs. left: -2000000px, a następnie tak, załadowanie drugiej strony zajmie więcej czasu, ale to nie ma nic wspólnego z byciem "poza ekranem" tylko rozmiar CSS.

Tak więc długa odpowiedź nie jest odkładaniem ekranu sprawia, że ​​nie ma znaczenia, że ​​nadal trzeba go załadować, jednak im większa wartość, tym dłużej trwa ładowanie.Jednak w tym przypadku jest tak mały, że nie stanowi to problemu.

Na przykład czas obciążenia ...

left:-2000px = Input: 0.021KB, Output: 0.019KB 
left:-2000000px = Input: 0.025KB, Output: 0.024KB 
+1

Chciałem odpowiedzieć na to samo - więcej tekstu do wysłania przez przewód. Jest to jeden z powodów, dla którego powszechną praktyką jest "lewe wcięcie: -999em;", a nie (rodzaj) odpowiednik "-9999px". – peteorpeter

+1

To był element, którego nie brałem pod uwagę, chociaż jest to oczywiste, kiedy o tym myślisz. I tak, wydajność może oznaczać czas ładowania, chociaż nie miałem na myśli konkretnie czasu ładowania - tylko _na_ miara wydajności. –

Powiązane problemy