¿Diferencia de rendimiento de CSS externo vs estilo en línea?

88

Un amigo mío dijo que usar en <div style=""></div>lugar de un archivo css comprimido puesto como link hrefen la sección principal aumenta el rendimiento. ¿Es eso cierto?

css  performance  inline-styles 
— Jorge
fuente
1
Hasta donde yo sé, son (más o menos) iguales, pero no puedo verificarlo.
— Nightfirecat
3
Esto podría arrojar algo de luz: mathiasbynens.be/notes/inline-vs-separate-file
— Sudhir Bastakoti
1
Tendría que ser un aumento significativo del rendimiento para lidiar con las pesadillas de mantenimiento que son los estilos en línea. Hasta ahora no he visto ninguna prueba de eso.
— steveax
1
Para las versiones anteriores de IE, el aumento de rendimiento es MUY significativo. He visto tablas HTML comportarse como un pegamento con estilo CSS.
— Jonathan

Respuestas:

90

El aumento de rendimiento que mencionó su amigo probablemente sea demasiado trivial en comparación con la cantidad de aumento de rendimiento (a través de otros factores) utilizando un archivo CSS.

Usando el atributo de estilo, el navegador solo pinta la regla para ese elemento en particular, que en este caso es el <div>elemento. Esto reduce la cantidad de tiempo de búsqueda para que el motor CSS encuentre qué elementos coinciden con el selector CSS (p. Ej.a.hover o #someContainer li).

Sin embargo, poner el estilo a nivel de elemento significaría que no puede almacenar en caché las reglas de estilo CSS por separado. Por lo general, colocar estilos en archivos CSS permitiría realizar el almacenamiento en caché, reduciendo así la cantidad de carga del servidor cada vez que carga una página.

Poner reglas de estilo a nivel de elemento también hará que pierda la noción de qué elementos tienen estilo de qué manera. También podría ser contraproducente el aumento de rendimiento de pintar un elemento en particular donde puede volver a pintar varios elementos juntos. El uso de archivos CSS separa CSS de HTML y, por lo tanto, le permite asegurarse de que sus estilos sean correctos y que sea más fácil de modificar más adelante.

Por lo tanto, si observa la comparación, verá que el uso de un archivo CSS tiene mucho más beneficio que el estilo a nivel de elemento.

No olvide que cuando tiene un archivo de hoja de estilo CSS externo, su navegador puede almacenar en caché el archivo, lo que aumenta la eficiencia de su aplicación.

— mauris
fuente
4
¿Puede proporcionar alguna estadística con el generador de perfiles de Chrome? La CPU y la GPU son costosas en dispositivos móviles y tabletas, donde el consumo de batería es enorme. Creo que hay una compensación. ¿Y cuál es el beneficio de Cache? El navegador tendrá que calcular el estilo del elemento actual y la resolución de estilos será más costosa si hay muchas reglas.
— Akash Kava
28
Tenga en cuenta que todas las desventajas relacionadas con el mantenimiento desaparecen cuando hay un motor que integra los estilos antes de enviarlos a los clientes
— Moshe Shaham
6
Las desventajas relacionadas con el mantenimiento también desaparecen cuando se usa React + Radium.
— AjaxLeung
1
@AjaxLeung sin duda lo que tú y Shaham habéis dicho es verdad. Esta respuesta se escribió en 2011, cuando la mayoría de las herramientas modernas aún no estaban disponibles.
— mauris
2
Si. Simplemente estaba agregando el comentario para aquellos que ven esta respuesta hoy y más allá.
— AjaxLeung
6

La página se cargará más rápido si usa estilos en línea frente a hojas de estilo. En algunos casos debe ser más rápido.

Cuando usa una hoja de estilo usando href, requiere otra solicitud al servidor, luego el análisis del archivo después de la respuesta. Con los estilos en línea no hay nada de eso, solo análisis directo.

Si un cliente tiene Internet lento, esa única solicitud podría ser muy lenta y dejar la página sin estilo hasta que se entregue la hoja de estilo. Nuevamente, si estuviera en línea no habría ningún retraso.

La única razón por la que usamos hojas de estilo es para estar organizados. En ocasiones, no se necesitan, por lo que los estilos en línea o las hojas de estilo en el documento son suficientes.

— sebjwallace
fuente
9
Esta respuesta ignora por completo el almacenamiento en caché del navegador. Las hojas de estilo solo permiten solicitar los estilos una vez y almacenarlos en caché, lo que reduce la cantidad de contenido enviado por cable.
— GeekOnCoffee
2
Esta respuesta también ignora el hecho de que los estilos en línea aumentan el tamaño del archivo HTML. Potencialmente, especialmente cuando se utilizan estilos en línea repetidos, varias veces más grande que el archivo CSS. Por cierto, los navegadores pueden cargar varios archivos en paralelo (y almacenarlos en caché como se mencionó anteriormente).
— Jan Van der Haegen
5

No es una pregunta fácil de responder, porque el rendimiento en este caso depende de muchos factores (complejidad de los selectores de CSS, tamaño del documento, etc.). Sin embargo, si tomamos un caso aislado, podemos ver que la clase CSS es en general más rápida que el estilo en línea:
estilo en línea vs clase CSS

— s.ermakovich
fuente
5
Estoy bastante seguro de que esto está probando la velocidad a la que se cambia la clase de nodo o el atributo de estilo en lugar de la velocidad a la que se aplica el estilo, que es lo que hace la pregunta
— Sam
@Sam ¿Qué quieres decir con "velocidad a la que se aplica el estilo"? ¿Puede proporcionar una prueba que mida esta velocidad? Si echa un vistazo al código de prueba, verá que la página se redistribuye en cada iteración, lo que significa que la prueba cubre no solo la modificación de clase / atributo, sino también el impacto real en la página.
— s.ermakovich
Quizás incluya el tiempo para agregar el estilo, pero también agrega tiempo. ¿Qué pasa si el documento ya tiene la prueba de clase o un estilo en línea sin que JS necesite agregarlo? Estoy alcanzando la velocidad para que el CSS se resuelva en cualquier caso y (podría estar equivocado) pero no creo que esta prueba solo haga eso, creo que hace un trabajo adicional.
— Sam
@Sam Esta prueba ignora la posible huella de cargar CSS por navegador y procesarlo. Mencioné en mi respuesta que este es un caso aislado. Solo mide el rendimiento de la aplicación de estilos de diferentes maneras (en línea frente a externo). Esto es lo que hacen las aplicaciones web típicas en la actualidad: cambiar el documento HTML de JavaScript sin recargar la página.
— s.ermakovich
Ah, está bien, me refería a estilos que no se agregan dinámicamente
— Sam
3

Bueno, puede, pero el motivo de la hoja de estilo vinculada o externa es que se puede almacenar en caché en el navegador, especialmente cuando se usa el mismo div en varias páginas del sitio. Esto significa que el navegador solo tiene que cargar la hoja de estilo una vez en lugar de tener que volver a cargar el código cada vez que el navegador recarga la página. También hace un código más limpio que facilita cualquier cambio o depuración.

— eciusr
fuente
3
Es la esencia del mecanismo de almacenamiento en caché. No necesita pruebas.
— Stroncio
5
Se puede "cobrar" no significa que se "cobrará"; y las "esencias" no son hechos.
— Ivan Castellanos
6
Chicos, ya no es la era de Duke Nukem, no cobramos a la gente. Caché por otro lado ...
— Sebas
3
El argumento del almacenamiento en caché no es válido para las aplicaciones de una sola página, que generalmente cargan todo una vez al principio y generan páginas sobre la marcha.
— MindJuice
1

LA VERDAD ES 'SI'

Hay una gran diferencia. Especialmente cuando está automatizando la interfaz de usuario. Prueba el siguiente código. Utilizo IE10 y bloc de notas para desarrollar. Estoy aprendiendo sobre la marcha y hago pruebas, esta es una prueba de versión abreviada. (tal vez haya errores ya que reduje el código para mostrar su respuesta)

Haga clic en la imagen a la que hace referencia y lea los mensajes de alerta. SUGERENCIA: Guarde este archivo y vuelva a guardarlo como edición antes de editarlo (probarlo).

Mis mejores deseos, Don

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>
— Don
fuente
28
Utilizo IE10 y el bloc de notas para desarrollar. ?
— xanderiel
1

En mi opinión, no hay una respuesta fija.

An inline CSSse cargará más rápido si el tamaño del contenido CSS se descarga más rápido de lo que su servidor respondería a unexternal CSS file solicitud (considerando el tiempo de DNS, la latencia del servidor, etc.).

Para CSS de tamaño normal, los incluiría en la página, para algo más de 15-20 KB probablemente lo pondría en un archivo externo y me aseguraría de que se pueda almacenar en caché.

Estoy seguro de que hay muchas otras consideraciones que me faltan ahora, pero no hay una respuesta fija para inline vs external.

— adrianTNT
fuente
-1

Definitivamente, usar hojas de estilo externas es una mejor opción porque te ayudará a recordar el estilo que has aplicado en los div (s). Reduce el tiempo de carga de la página porque cuanto menor sea el código HTML, más rápido se cargará.

Pero en algunos casos, es posible que deba cambiar alguna propiedad de un div en particular, entonces el estilo en línea es la mejor opción. Y realmente hablando, uno o dos estilos en línea no cambiarán el tiempo de carga de la página.

Hay otra opción de hoja de estilo interna, pero se usa solo cuando tiene un sitio web de una sola página, como si estuviera haciendo una plantilla. Esto se debe a que tienes que escribir CSS en cada página HTML

— vicky
fuente
-3

Prefiero usar CSS en línea sobre CSS externo donde hay varios archivos CSS pequeños para cada otro elemento o imagen. No tiene sentido descargar varios archivos CSS con solo 5-10 líneas de código en cada uno. Si su elemento contiene propiedades como hover, active, check, etc., se supone que debe usar un archivo CSS externo, ya que evitará complicar su proceso de desarrollo.

— atuls1396
fuente
Eso hace que el mantenimiento sea extremadamente difícil. Los archivos CSS, JS deben almacenarse en caché en el navegador de su usuario de forma predeterminada.
— dave2118
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.