CSS externo vs diferença de desempenho de estilo inline?

88

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
1
Pelo que eu sei, eles são (aproximadamente) iguais, mas não posso verificar isso.
— Nightfirecat
3
Isso pode lançar alguma luz: mathiasbynens.be/notes/inline-vs-separate-file
— Sudhir Bastakoti
1
Teria que ser um aumento significativo de desempenho para lidar com os pesadelos de manutenção que são estilos inline. Até agora, não vi nenhuma evidência disso.
— steveax
1
Para versões mais antigas do IE, o aumento de desempenho é MUITO significativo. Já vi tabelas HTML se comportarem como cola com estilo CSS.
— Jonathan

Respostas:

90

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!

— mauris
fonte
4
Você pode fornecer estatísticas com o Chrome Profiler? CPU e GPU são caros em celulares e tablets, onde o consumo da bateria é enorme. Eu acho que há uma troca. E qual é a vantagem do Cache? O navegador terá que calcular o estilo do elemento atual e a resolução de estilos será mais cara se houver muitas regras.
— Akash Kava de
28
Observe que todas as desvantagens relacionadas à manutenção desaparecem quando há um motor que alinha os estilos antes de enviar aos clientes
— Moshe Shaham
6
As desvantagens relacionadas à manutenção também desaparecem com o React + Radium.
— AjaxLeung de
1
@AjaxLeung, sem dúvida o que você e Shaham disseram é verdade. Esta resposta foi escrita em 2011, quando a maioria das ferramentas modernas ainda não estava disponível.
— mauris de
2
Sim. Eu estava simplesmente adicionando o comentário para aqueles que veem esta resposta hoje e depois.
— AjaxLeung de
6

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.

— sebjwallace
fonte
9
Esta resposta ignora completamente o cache do navegador. As folhas de estilo permitem apenas solicitar os estilos uma vez e armazená-los em cache, diminuindo a quantidade de conteúdo enviado pela transmissão.
— GeekOnCoffee
2
Essa resposta também ignora o fato de que os estilos embutidos tornam o arquivo HTML maior. Potencialmente, especialmente ao usar estilos embutidos repetidos, várias vezes maior que o arquivo CSS. A propósito, os navegadores podem carregar vários arquivos em paralelo (e armazená-los em cache como mencionado acima).
— Jan Van der Haegen
5

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

— s.ermakovich
fonte
5
Tenho certeza de que isso está testando a velocidade com que a classe do nó ou atributo de estilo é alterado, em vez da velocidade com que o estilo é aplicado, que é o que a pergunta está perguntando
— Sam
@Sam O que você quer dizer com "velocidade com que o estilo é aplicado"? Você pode fornecer um teste que mede essa velocidade? Se você der uma olhada no código de teste, verá que o refluxo da página ocorre em cada iteração, o que significa que o teste cobre não apenas a modificação de classe / atributo, mas também o impacto real na página.
— s.ermakovich
Pode incluir o tempo para adicionar o estilo, mas também adiciona tempo. E se o documento já tivesse o teste de classe ou um estilo inline sem que JS precise adicioná-lo. Estou chegando à velocidade para que o CSS seja resolvido em ambos os casos e (posso estar errado), mas não acho que este teste apenas faça isso, acho que faz um trabalho extra.
— Sam
@Sam Este teste ignora possível pegada de carregar CSS pelo navegador e processá-lo. Mencionei na minha resposta que este é um caso isolado. Ele apenas mede o desempenho da aplicação de estilos de maneiras diferentes (inline vs externo). Isso é o que os aplicativos da Web típicos fazem hoje - mudar o documento HTML do JavaScript sem recarregar a página.
— s.ermakovich
Ok, eu estava me referindo a estilos adicionados não dinamicamente
— Sam
3

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.

— eciusr
fonte
3
É a essência do mecanismo de cache. Não precisa de provas.
— estrôncio
5
Pode ser "sacado", não significa "sacado"; e "essências" não são fatos.
— Ivan Castellanos
6
Pessoal, não é mais a era do duque nukem, nós não trocamos pessoas. Cache por outro lado ...
— Sebas
3
O argumento de cache não é válido para aplicativos de página única, que geralmente carregam tudo uma vez na frente e geram páginas dinamicamente.
— MindJuice
1

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>
— Don
fonte
28
Eu uso o IE10 e o bloco de notas para desenvolver. ?
— xanderiel,
1

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 uma external 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.

— adrianTNT
fonte
-1

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

— vicky
fonte
-3

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.

— atuls1396
fonte
Isso torna a manutenção extremamente difícil. Os arquivos CSS e JS devem ser armazenados em cache no navegador do usuário por padrão.
— dave2118
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.