2010-04-19 15 views
5

Douglas Crockford describe la consecuencia de que JavaScript indague el estilo de un nodo. Cómo simplemente pedir el margen de un div hace que el navegador "vuelva a fluir" el div en el motor de renderizado del navegador cuatro veces.Hace margin-left: 2px; render más rápido que el margen: 0 0 0 2px ;?

Eso me hizo preguntarme, durante la representación inicial de una página (o en la jerga de Crockford un "desplazamiento web") ¿es más rápido escribir CSS que define solo los valores distintos de cero/no predeterminados? Para dar un ejemplo:

div{ 
    margin-left:2px; 
} 

Que

div{ 
    margin:0 0 0 2px; 
} 

Sé consecuencia de este 'ahorro' es insignificante, pero creo que es importante comprender cómo se implementan las tecnologías. Además, esta no es una pregunta sobre el formato de CSS: esta es una pregunta acerca de las implementaciones de los navegadores que procesan CSS.

Referencia: http://developer.yahoo.com/yui/theater/video.php?v=crockonjs-4

Respuesta

1

No, dependiendo de su navegador, descomprimirá los valores de diferentes maneras incluso antes de aplicar los estilos y en Firefox, tendría un ligero efecto en la velocidad de ejecución. Sin embargo, es una buena idea usar CSS abreviado de cualquier forma.

Si se quiere entender cómo funciona, Firefox, desempaqueta el valor:

{margin: 0 0 0 2px;} 

como

{margin-top: 0pt;margin-right: 0pt;margin-bottom: 0pt;margin-left: .04pt;} 

antes de aplicar los estilos a la página. Esto es para la normalización.

* (. 04pt es una estimación)

2

No estoy seguro de si se "hace" más rápido. PERO: la segunda versión es unos pocos bytes más grande que la primera versión. (Y supongo que la red es más lenta que el tiempo de renderización de la página, haciendo que la primera versión realmente "rinda más rápido")