Um amigo meu disse que usar em <div style=""></div>vez de um arquivo css compactado colocado link hrefna seção head aumenta o desempenho. Isso é verdade?
css
performance
inline-styles
George
fonte
fonte
Respostas:
O aumento de desempenho que seu amigo mencionou é provavelmente muito trivial em comparação com a quantidade de aumento de desempenho (por meio de outros fatores) usando um arquivo CSS.
Usando o atributo style, o navegador apenas pinta a regra para aquele elemento específico, que neste caso é o
<div>elemento. Isso reduz a quantidade de tempo de pesquisa para o mecanismo CSS encontrar quais elementos correspondem ao seletor CSS (por exemplo,a.hoverou#someContainer li).No entanto, colocar o estilo no nível do elemento significaria que você não pode armazenar em cache as regras de estilo CSS separadamente. Normalmente, colocar estilos em arquivos CSS permite que o cache seja feito, reduzindo assim a quantidade de carga do servidor cada vez que você carrega uma página.
Colocar regras de estilo no nível do elemento também fará com que você perca o controle de quais elementos são estilizados de que maneira. Também pode sair pela culatra o aumento de desempenho de pintar um elemento específico, onde você pode repintar vários elementos juntos. O uso de arquivos CSS separa o CSS do HTML e, portanto, permite que você verifique se os estilos estão corretos e é mais fácil modificá-los posteriormente.
Portanto, se você olhar a comparação, verá que usar um arquivo CSS tem muito mais benefícios do que estilizar no nível do elemento.
Não se esqueça que, quando você tem um arquivo de folha de estilo CSS externo, seu navegador pode armazenar o arquivo em cache, o que aumenta a eficiência do aplicativo!
fonte
A página carregará mais rápido se você usar estilos embutidos em vez de folhas de estilo. Em alguns casos, deve ser mais rápido.
Quando você usa uma folha de estilo com href, ela exige outra solicitação ao servidor e, em seguida, a análise do arquivo após a resposta. Com estilos embutidos, não há nada disso, apenas análise direta.
Se um cliente tiver Internet lenta, essa única solicitação pode ser muito lenta, deixando a página sem estilo até que a folha de estilo seja entregue. Novamente, se fosse em linha, não haveria nenhum atraso.
A única razão pela qual usamos folhas de estilo é para ser organizado. Há momentos em que eles não são necessários, portanto, estilos embutidos ou folhas de estilo no documento são suficientes.
fonte
Não é uma pergunta fácil de responder, porque o desempenho neste caso depende de muitos fatores (complexidade dos seletores CSS, tamanho do documento, etc.). No entanto, se tomarmos um caso isolado, podemos ver que a classe CSS é em geral mais rápida do que o estilo inline:
estilo inline vs classe CSS
fonte
Bem, pode, mas a razão para a folha de estilo vinculada ou externa é para que ela possa ser armazenada em cache no navegador, especialmente quando você usa o mesmo div em várias páginas do site. Isso significa que o navegador só precisa carregar a folha de estilo uma vez, em vez de ter que recarregar o código toda vez que a página for recarregada. Ele também torna o código mais limpo, o que torna qualquer alteração ou depuração mais fácil.
fonte
A VERDADE É 'SIM'
Há uma enorme diferença. Especialmente quando você está automatizando a interface do usuário. Experimente o seguinte código. Eu uso o IE10 e o bloco de notas para desenvolver. Estou aprendendo enquanto faço os testes, este é um teste de versão abreviada. (pode haver erros quando reduzi o código para mostrar sua resposta)
Clique na imagem que você referencia e leia as mensagens de alerta. SUGESTÃO: Salve este arquivo e salve novamente como uma edição antes de editar (testar).
Muitas felicidades, 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>fonte
Não há uma resposta fixa em minha opinião.
Um
inline CSSserá carregado mais rápido se o tamanho do conteúdo CSS for baixado mais rápido do que o seu servidor responderia a umaexternal CSS filesolicitação (considerando o tempo de DNS, latência do servidor, etc).Para CSS de tamanho normal, eu os colocaria embutidos na página; para algo acima de 15-20 KB, provavelmente colocaria em um arquivo externo e me certificaria de que pode ser armazenado em cache.
Tenho certeza de que estou perdendo muitas outras considerações agora, mas não há uma resposta fixa para interno x externo.
fonte
Usar folhas de estilo externas é definitivamente uma opção melhor porque o ajudará a lembrar o estilo que você aplicou no (s) div (s). Isso reduz o tempo de carregamento da página porque quanto menor o código HTML, mais rápido ele carregará.
Mas, em alguns casos, você pode ter que alterar alguma propriedade de um div específico, então o estilo inline é a melhor opção. E, falando sério, um ou dois estilos embutidos não alteram o tempo de carregamento da página.
Existe outra opção de folha de estilo interna, mas ela é usada apenas quando você tem um site de uma única página, como se estivesse criando um modelo. Isso ocorre porque você deve escrever CSS em todas as páginas HTML
fonte
Eu prefiro usar CSS inline em vez de CSS externo, onde existem vários arquivos CSS pequenos para cada outro elemento ou imagem. Não adianta baixar vários arquivos CSS com apenas 5-10 linhas de código em cada um. Se o seu elemento contém propriedades como hover, active, checks etc., você deve usar um arquivo CSS externo, pois isso evitará complicar o processo de desenvolvimento.
fonte