¿Hay una penalización de rendimiento al "esconder" objetos de la pantalla en cantidades ridículas?

Question

Una práctica que uso comúnmente cuando manipulo contenido en sitios web es colocar absolutamente elementos con un valor izquierdo (o algunas veces superior) de alrededor de -2000px, para asegurar que no se vea en la pantalla.

Ahora, sé que podría usar display: none para hacer que mis objetos desaparezcan, pero algunos elementos no funcionan bien cuando no se muestran, y a veces necesito hacer referencia a algunas propiedades como su ancho, por ejemplo, que puede se puede acceder cuando la propiedad display está configurada en none. Muy a menudo posicionaré el elemento para que quede oculto de la pantalla.

Mi hipótesis, entonces, es la siguiente:

Puesto que el objeto no se representa en la pantalla no debería haber ninguna diferencia en el rendimiento de la página web * cuando uso left: 2000px en contraposición a left: 200000000px.

así que supongo que si se utiliza el siguiente código, no habría ninguna diferencia en el rendimiento de las dos páginas:

Página uno:

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

Página dos:

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

¿Son correctas mis suposiciones? Si ese elemento fuera la única diferencia entre dos páginas determinadas, ¿habría alguna diferencia (por pequeña que sea) en el rendimiento?

* Es decir el tiempo de carga, tamaño de página, capacidad de respuesta, o cualquier otra medida de rendimiento

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

actualización

he perfilado las páginas según lo sugerido por Michael y encontró lo siguiente: Spark era lo correcto al decir que el tiempo de carga se vería afectada por el tamaño del archivo. Había una diferencia de cuatro bytes en el tamaño del archivo que correspondía a una diferencia de aproximadamente 4 ms en el tiempo de carga.

En segundo lugar, mi increíblemente grande valor a la izquierda fue interpretado correctamente por IE y Firefox, pero no por Chrome. Chrome no parece reconocer valores superiores a alrededor de 135 millones de píxeles. Sin embargo, dado que la diferencia de rendimiento parece ser mínima, no puedo especular sobre por qué habrían decidido limitarla a una cantidad tan arbitraria.

Answer 1

Puede intentar perfilar el tiempo de carga de la página con Firebug (o las herramientas de desarrollo de Chrome/Safari), pero me sorprendería enormemente si hubiera alguna diferencia. El navegador se preocupa por los coords x, y, z de un elemento. No importa si están dentro o fuera de la pantalla; todavía son solo tres puntos de datos discretos.

Answer 2

Cuando dices rendimiento ¿te refieres a tiempo de carga?

El tiempo de carga del CSS podría verse afectado si pudiera medir la diferencia en bytes que queda: -2000px versus izquierda: -2000000px, entonces sí, tomaría más tiempo cargar el último, pero esto no tiene nada que ver con que sea "fuera de pantalla" solo el tamaño de CSS.

Por lo tanto, la respuesta larga no es dejarlo fuera de la pantalla hace no hay diferencia que todavía tenga que cargarlo, sin embargo, cuanto mayor sea el valor, más tiempo se tarda en cargar.En este caso, es tan pequeño que realmente no es un problema.

Por ejemplo, los tiempos de carga ...

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