para - CSS externo vs diferencia de rendimiento de estilo en línea?
hojas de estilo css (6)
Un amigo mío dijo que el uso de <div style=""></div> lugar del archivo css comprimido puesto como link href en la sección de encabezado da un impulso al rendimiento. ¿Es eso cierto?
Bien, puede hacerlo, pero el motivo de la hoja de estilo vinculada o externa es que puede almacenarse en caché en el navegador, especialmente cuando usa el mismo div en varias páginas para el sitio. Esto significa que el navegador solo tiene que cargar la hoja de estilos una vez en lugar de tener que volver a cargar el código cada vez que el navegador recarga la página. También crea un código más limpio que facilita cualquier cambio o eliminación de errores.
El aumento de rendimiento que mencionó su amigo es probablemente 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 elemento <div> . Esto reduce la cantidad de tiempo de búsqueda para el motor de CSS para encontrar qué elementos coinciden con el selector de CSS (por ejemplo, a.hover o #someContainer li ).
Sin embargo, al aplicar estilo a nivel de elemento, significa que no puede almacenar en caché las reglas de estilo CSS por separado. Por lo general, poner estilos en archivos CSS permitiría el almacenamiento en caché, reduciendo así la cantidad de carga del servidor cada vez que carga una página.
Poner reglas de estilo en el nivel del elemento también hará que pierdas la noción de qué elementos están diseñados de qué manera. También puede ser contraproducente el impulso de rendimiento de pintar un elemento en particular donde puede repintar múltiples elementos juntos. El uso de archivos CSS separa el CSS del HTML y, por lo tanto, le permite asegurarse de que sus estilos sean correctos y que sea más fácil modificarlos más adelante.
Por lo tanto, si observa la comparación, verá que usar un archivo CSS tiene mucho más beneficio que el estilo a nivel de elemento.
No olvide que cuando tiene un archivo de hojas de estilo CSS externo, su navegador puede almacenar en caché el archivo lo que aumenta la eficiencia de su aplicación.
LA VERDAD ES ''SÍ''
Hay una gran diferencia Especialmente cuando está automatizando la interfaz de usuario. Pruebe el siguiente código. Uso IE10 y bloc de notas para desarrollar. Estoy aprendiendo a medida que avanzo y hago pruebas; esta es una prueba de versión abreviada. (Puede haber errores ya que reduje el código para mostrar tu respuesta)
Haga clic en la imagen que referencia y lea los mensajes de alerta. SUGERENCIA: Guarde este archivo de nuevo como una edición antes de editar (probar).
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>
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 utiliza 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 el análisis directo.
Si un cliente tiene Internet lento, entonces esa única solicitud podría ser muy lenta, dejando la página sin estilo hasta que se entregue la hoja de estilo. De nuevo, si estuviera en línea, no habría ningún retraso.
La única razón por la que usamos hojas de estilo debe ser organizada. Hay momentos en que no son necesarios, por lo que los estilos en línea o las hojas de estilo de documento son suficientes.
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, entonces 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
Usar hojas de estilo externas es definitivamente 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 puede que tenga que 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 harán ningún cambio al momento de cargar la página.
Hay otra opción de hoja de estilo interna, pero solo se usa cuando tiene un sitio web de una sola página, como si estuviera haciendo una plantilla. Esto se debe a que debes escribir CSS en cada página HTML