2011-05-04 22 views
6

Jak wartość css z-index wpływa na wydajność?z-index, jak wpływa to na wydajność?

Jeśli mam wiele obrazów na stronie ma znaczenie, czy używam wysokich wartości z-index, takich jak 10.000?

Na przykład strona zawiera 15 obrazów z indeksami z zakresu od 500 do 10 000, a jeśli obrazy są ruchome (przeciągane przez jQuery), czy ma wpływ na wydajność przy użyciu wysokich wartości, jeśli strona jest przerysowana tak często?

Odpowiedz

6

Liczba warstw ma znaczenie, ale rzeczywista wartość z-index nie. Podczas renderowania strony przeglądarka po prostu sortuje wszystkie elementy pozycjonowane bezwzględnie za pomocą indeksu Z (rosnąco) i rysuje je w tej kolejności.

EDYTOWANIE: Ponadto wydajność uzyskana podczas sortowania występuje tylko wtedy, gdy zmienia indeks z warstw. Jeśli indeksy z-z nie zmieniają się często, trafienie wydajnościowe prawdopodobnie nie będzie w ogóle zauważalne. Nawet jeśli zmieniasz indeksy z dużo, sortowanie listy 15 elementów jest prawie natychmiastowe.

+0

Zawsze zastanawiałem się o tym. Niektóre wtyczki dodają wartości, takie jak 9999, i próbują "zawsze być na topie", więc kiedy chcesz przesłonić, musisz użyć liczb takich jak 10000 lub 99999 - dobrze wiedzieć, że nie ma znaczenia, jakie liczby są dla wydajności. – squarecandy

1

Tak. W jakim stopniu trudno jest odpowiedzieć, nie widząc całej strony, jednak niektóre problemy z wydajnością są w grze. Dzięki manipulacji z indeksem Z oraz jQuery i innym bibliotekom, które dynamicznie wybierają i manipulują DOM-ami, zasadniczo zmieniasz układ fragmentów HTML. Co ważne przeglądarka nie ma pojęcia, co oznacza MODAL. Każde żądanie zmiany układu zasadniczo prosi przeglądarkę o ponowne obliczenie DOM. To jest twój hit wydajności.

0

Choć nie jest to bezpośrednia odpowiedź na pytanie o wydajność, ważnego dodatkową uwagę, gdy mówimy o użyciu bardzo dużej liczby z-index:

2147483647 jest maksymalną z-index w większości przeglądarek internetowych, ponieważ to największą możliwą 32-bitową wartość całkowitą. Dowolna liczba większa niż 2147483647 automatycznie powróci do 2147483647.

Od https://wordpress.org/support/topic/css-reference-to-the-tinymce-absolute-position-handle

Powiązane problemy