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
fuente
Respuestas:
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.hovero#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.
fuente
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.
fuente
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
fuente
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.
fuente
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>fuente
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 filesolicitud (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.
fuente
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
fuente
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.
fuente