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.
Można również użyć 'visiblity: hidden;' jeśli chcesz ukryć element bez utraty możliwości uzyskania informacji o metryki. –
@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? –