Por que não incorporar estilos / scripts em HTML em vez de vincular?

Concatenamos arquivos CSS e JavaScript para reduzir o número de solicitações HTTP, o que melhora o desempenho. O resultado é HTML como este:

<link rel="stylesheet" href="all-my-css-0fn392nf.min.css">
<!-- later... -->
<script src="all-my-js-0fn392nf.min.js"></script>

Se temos uma lógica de construção / servidor para fazer tudo isso por nós, por que não dar um passo adiante e incorporar esses estilos e scripts concatenados no HTML?

<style>.all{width:100%;}.my{display:none;}.css{color:white;}</style>
<!-- later... -->
<script>var all, my, js;</script>

São duas solicitações HTTP a menos, mas ainda não vi essa técnica na prática. Por que não?

Como salvar solicitações HTTP é de pouca utilidade quando você a obtém, interrompendo o cache. Se as folhas de estilo e os scripts forem veiculados separadamente, eles poderão ser armazenados em cache muito bem e amortizados em muitas e muitas solicitações para páginas totalmente diferentes. Se eles são misturados na mesma página HTML, eles precisam ser retransmitidos a cada. Solteiro. Pedido.

O HTML desta página, por exemplo, tem 13 KB agora. Os 180 KB de CSS atingiram o cache e os 360 KB de JS. Ambas as ocorrências no cache levaram muito tempo e não consumiram praticamente nenhuma largura de banda. Escolha o criador de perfil de rede do seu navegador e tente em outros sites.

Simplesmente porque o desempenho da Web realmente importa! 99% de vezes, proporcionará tempos de resposta mais rápidos para o usuário final.

Aqui estão alguns exemplos de Velocity Conf.

• Bing - Uma página que foi 2 segundos mais lenta resultou em uma queda de 4,3% na receita / usuário.
• Google - Um atraso de 400 milissegundos causou uma queda de 0,59% nas pesquisas / usuário.
• Yahoo ! - Uma desaceleração de 400 milissegundos resultou em uma queda de 5-9% no tráfego de página inteira.
• Shopzilla - Acelerar o site em 5 segundos aumentou a taxa de conversão em 7 a 12%, dobrou o número de sessões do marketing de mecanismos de pesquisa e reduziu pela metade o número de servidores necessários.
• Mozilla - Remover 2,2 segundos de suas páginas de destino aumentou as conversões de download em 15,4%, o que eles estimam que resultará em mais 60 milhões de downloads do Firefox por ano.
• Netflix - A adoção de uma única otimização, a compressão gzip, resultou em uma aceleração de 13 a 25% e reduziu o tráfego de rede de saída em 50%.

De Steve Souders, pioneiro em otimização de desempenho da Web,

80-90% do tempo de resposta do usuário final é gasto no frontend - Comece aqui primeiro.

O uso de arquivos externos produz páginas mais rápidas porque os arquivos JavaScript e CSS são armazenados em cache pelo navegador / redes / proxies (conforme definido no protocolo HTTP com cabeçalhos de cache). O JavaScript e o CSS incluídos nos documentos HTML são baixados toda vez que o documento HTML é solicitado. Isso reduz o número de solicitações HTTP necessárias, mas aumenta o tamanho do documento HTML. Se você estiver usando scripts do tipo Jquery, é fácil refazer 300 KB de scripts e não acredita que todos tenham uma largura de banda de 100 MBits / s com baixa latência, executando um único aplicativo - o navegador - aberto no seu site. 99% de vezes, proporcionará tempos de resposta mais rápidos para o usuário final.

A frequência com que os componentes JavaScript e CSS externos são armazenados em cache em relação ao número de documentos HTML solicitados também é importante. Se os usuários do seu site tiverem várias visualizações de página por sessão e muitas de suas páginas reutilizarem os mesmos scripts e folhas de estilo (bundles), haverá um benefício potencial maior dos arquivos externos em cache.

Mas, às vezes, o inlining é preferível para aplicativos de página única ou sites com uma visualização de página única por sessão. Não existe uma regra de ouro e geralmente a esquece, pois se refere principalmente a sites muito específicos, realmente envolvidos pelo desempenho do usuário final.

Você pode ler aqui por que o desempenho é importante (Isenção de responsabilidade: eu sou o autor)

A versão mais recente do HTTP foi criada em 1999. Em 1999, todos se conectavam à Internet com acesso discado. A Internet estava muito lenta. 16 anos depois, as coisas mudaram bastante, mas os protocolos que usamos não o fizeram.

As respostas que não devemos incluir "porque interfere no cache" são um pouco enganadoras, principalmente na era da Internet super rápida. Quando você efetivamente faz os cálculos, geralmente há uma diferença insignificante entre os tempos de carregamento dos usuários com cache quente e frio, se você tiver inline. O fato de que não é uma pequena diferença não é inerentemente porque você tem embutido, mas por causa do projeto inflexível de HTTP / 1.1.

O protocolo SPDY implementa algo chamado envio de servidor . Essencialmente, é necessário incluir o próprio documento HTML e o protocolo. Um servidor inteligente saberá quais recursos o cliente já possui. Um servidor burro apenas envia tudo independentemente - isso ainda será um benefício de desempenho, mas poderá custar em termos de largura de banda. Se o navegador tiver o conteúdo em seu cache, ele poderá simplesmente descartar as cópias recebidas. O servidor espera até que o HTML seja carregado antes de enviar os recursos adicionais - em teoria, o navegador pode enviar um sinal para cancelar o envio do servidor.

O HTTP / 2.0 é baseado no SPDY e provavelmente implementará o envio por servidor, mas, em teoria, você pode começar a usar o SPDY hoje. Portanto, a verdadeira razão pela qual não alinhamos é um dos legados - os protocolos que existem atualmente são antigos e não são flexíveis o suficiente para obter 'inlining em nível de protocolo'.

Além das preocupações de cache e recuperação que as outras respostas levantam, eu gostaria de destacar outro problema mais obscuro: a análise .

O JavaScript que aparece em HTML pode ter problemas de análise, como neste exemplo:

<html>
<head>
<script>
function myfunc() {
    if ("</style> isn't a problem")
        return "but </script> is"
}
</script>
<style>
body::after {
  content: '</script> is okay, but not </style>'
}
</style>
</head>
<body>
<script>document.write(myfunc())</script>
</body>
</html>

... o que significa que você teria que transformar seu script para escapar de alguns caracteres que são acionados em HTML. Esse problema desaparece quando você fornece CSS e JavaScript como recursos externos, porque eles não precisam mais levar em consideração o contexto de análise 'pai'.

Se você veicular seu conteúdo como XML, poderá contornar isso usando as seções CDATA. CDATA, no entanto, vem com um problema semelhante:

<?xml version="1.0" encoding="utf-8"?>
<html>
<head>
<script>
// <![CDATA[
function myfunc() {
    if ("</script> is no longer a problem")
        return "but ]]> is"
}
// ]]>
</script>
<style>
<![CDATA[
body::after {
  content: 'same ]]> issue here'
}
]]>
</style>
</head>
<body>
<script>document.write(myfunc())</script>
</body>
</html>

Inliners cuidado.

A separação do conteúdo do estilo de sua apresentação geralmente é uma vantagem maior que o número menor de solicitações de HTTP.

A separação de todo o estilo habilita e incentiva a reutilização e os arquivos compartilhados.

O conteúdo dos arquivos também será mais estático e estará disponível para armazenamento em cache nos servidores e clientes, para essa página e outras páginas visitadas.

Para sua pergunta específica, porém ... Se o servidor for feito para fazer a minificação, isso dificulta a manutenção e a depuração de ativos. No entanto, muitas estruturas agora fazem isso no nível do arquivo, por exemplo, todos os cs e todos os js. Por exemplo, a estrutura Ruby on Rails agora minimiza seus ativos para produção. Geralmente, de 5 a 10 solicitações HTTP extras não são o gargalo, é mais se houver mais de 100 solicitações HTTP (que você costuma receber com imagens).

A etapa extra de realmente incluir o código nas próprias páginas teria a desvantagem de páginas maiores, pois você teria que gerenciar a sequência de download com cuidado e a página não conseguir exibir o conteúdo com frequência sem o restante da página (agora grande) sendo baixado.

1. Minimize a codificação duplicada. para economizar tempo (você pode reutilizar o estilo e a função JS codificados para uma página).
2. Minimize o esforço de mudança. (Se o seu cliente solicitar que você altere a cor do botão do site. Você precisará acessar uma página por uma).
3. Reduza o tempo de carregamento (se o seu CSS e JS duplicarem, isso significa que o tamanho das páginas individuais aumenta e consome tempo para fazer o download. Mas o CSS JS comum não precisa baixar novamente e novamente).
4. Uso remoto. (você pode colocar seu CSS js JS comum em um local remoto. não no mesmo servidor hospedado)
5. Reduza o tempo de correção de bugs. Se houver um bug em uma função, você precisará ir página por página para corrigir os erros nos JS e CSS incorporados.
6. Para aumentar o SEO (basta separar o conteúdo com metadados)
7. Mais limpo e compreensível do código (se você incorporar tudo em um arquivo, a depuração e a clareza do código desapareceram. E cada página será uma página muito longa).
8. Além disso, isso ajudará você a reduzir o tamanho do produto.
9. Ainda assim, você pode considerar incorporar a coisa mais exclusiva na mesma página.

Não devemos incorporar estilos / scripts em HTML porque

Os estilos / scripts incorporados devem ser baixados a cada solicitação de página:

Esses estilos não podem ser armazenados em cache pelo navegador e reutilizados para outra página. Por esse motivo, é recomendável incorporar uma quantidade mínima de CSS / JS possível.

em vez disso, usamos o link coz quando usamos o link para vincular css / scripts

A velocidade do site aumenta para várias solicitações de página:

Quando uma pessoa visita seu site pela primeira vez, seu navegador baixa o HTML da página atual mais o arquivo CSS e JS vinculado. Quando eles navegam para outra página, seu navegador precisa apenas baixar o HTML da nova página, o arquivo CSS / JS é armazenado em cache e, portanto, não precisa ser baixado novamente. Isso pode fazer uma grande diferença, principalmente se você tiver um grande estilo e arquivo de script.