A inclusão do CSS e JS no HTML melhora os tempos de carregamento da página e / ou o desempenho do servidor?

1

Qual dos dois snippets de HTML tem melhor desempenho?

Incluindo o CSS & JS no HTML

<html>
 <head>
  <style>
   <?php include("someStyle.css"); ?>
  </style>
  <script>
   <?php include("someScript.js"); ?>
  </script>
 </head>

OU vinculando o CSS & JS:

<html>
    <head>
        <title>Family Tree</title>
        <script src="someScript.js"></script>
        <link href="someStyle.css" rel='stylesheet' type='text/css' />
    </head>

A lógica em que consigo pensar é

  1. O servidor recebe menos acessos (+ servidor)
  2. As transferências paralelas são reduzidas (navegador)
  3. O desempenho de
  4. DEFLATE é melhorado, se usado. (+ servidor)

Vou notar uma melhoria / degradação para grandes cargas de servidor?

    
por Lord Loh. 08.02.2013 / 23:34

2 respostas

3

Você obterá um melhor desempenho com arquivos JavaScript e CSS separados, pois eles não mudam com frequência e, portanto, podem ser armazenados em cache de forma mais agressiva, enquanto o HTML é geralmente dinâmico e não pode ser armazenado em cache. Se você inline seu JavaScript e CSS, você não poderá armazená-los em cache, o que significa mais dados para download e maior tempo de geração de páginas. Você provavelmente quer fazer o seguinte para esses arquivos separados:

  • Concatene CSS e JS em um único arquivo cada
  • Minimize o conteúdo
  • Ativar compactação gzip ao veicular os arquivos
  • Verifique se Etag e Last-Modified cabeçalhos estão definidos e se o servidor honra If-Modified-Since e If-Not-Match
  • Defina um cabeçalho Expires em algum momento no futuro
por 08.02.2013 / 23:50
0

Bem, um exemplo é o lado do cliente e o outro é do lado do servidor. Portanto, se você preferir um melhor desempenho do servidor, vá para o lado do cliente em seu segundo exemplo. By the way, o seu ainda ligar em ambos os exemplos e não introduzir qualquer código CSS ou JS no doc HTML real. No primeiro exemplo, você está dizendo ao servidor para processar o código CSS e JS dentro das tags PHP e, no segundo exemplo, está dizendo ao cliente (seu navegador da Web) para processar o código CSS e JS.

    
por 09.02.2013 / 05:06