2011-05-04 13 views
6

¿Cómo afecta el valor de css z-index al rendimiento?z-index, ¿cómo afecta el rendimiento?

Si tengo varias imágenes en una página ¿Importa si uso valores altos de índice z, como 10,000?

Por ejemplo, una página contiene 15 imágenes con índices z que van de 500 a 10.000, y si las imágenes son movibles (jQuery se puede arrastrar), ¿afecta el rendimiento al usar valores altos si la página se vuelve a dibujar con tanta frecuencia?

Respuesta

6

El número de capas importa, pero el valor real del índice z no lo hace. Al renderizar la página, el navegador simplemente ordena todos los elementos posicionados por su índice z (ascendente) y los dibuja en ese orden.

EDIT: Además, el rendimiento alcanzado por la clasificación solo se produce cuando cambia el índice Z de las capas. Si los índices z no cambian con frecuencia, es probable que el rendimiento no se note en absoluto. Incluso si está cambiando mucho los índices z, ordenar una lista de 15 elementos es casi instantáneo.

+0

Siempre se preguntó acerca de esto. Algunos complementos agregan valores como 9999 para intentar y "siempre estar en la parte superior", por lo tanto, cuando desea anular eso, debe usar números como 10000 o 99999, es bueno saber que no importa cuáles sean los números para el rendimiento. – squarecandy

1

Sí. Hasta qué punto es difícil responder sin ver toda la página, sin embargo, algunos problemas de rendimiento están en juego. Con la manipulación del índice Z y con jQuery y otras bibliotecas que seleccionan y manipulan DOM de forma dinámica, básicamente se está reestructurando el diseño de los fragmentos de HTML. Es importante destacar que un navegador no tiene idea de lo que significa MODAL. Cualquier solicitud para cambiar el diseño le pide al navegador que vuelva a calcular el DOM. Ese es tu golpe de rendimiento.

0

Aunque no es una respuesta directa a la cuestión de rendimiento, una importante consideración adicional cuando se habla sobre el uso de números muy altos z-index:

2147483647 es el máximo índice z en la mayoría de los navegadores web, ya es el mayor valor entero de 32 bits posible. Cualquier número superior a 2147483647 volverá automáticamente a 2147483647.

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

Cuestiones relacionadas