Dovremmo inserire i CSS nel codice HTML attraverso lo stile durante il processo di compilazione per evitare le richieste di rete aggiuntive richieste dal collegamento?

6

Normalmente ci colleghiamo ai CSS tramite il tag <link> . Tuttavia, questo porta al browser a fare una richiesta di rete per il foglio di stile, che è lento.

Cosa succede se, nel processo di compilazione, abbiamo preso il nostro file CSS e inserito nel codice HTML utilizzando <style> ? Ad esempio, supponiamo di avere:

app.css

p {
  color: red;
}

index.html

<html>
  <head>
    <link rel="stylesheet" href="app.css">
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

Perché non eseguire un processo di generazione che utilizza app.css per compilare index.html nel seguente:

<html>
  <head>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>

Allo stesso modo, dovremmo fare lo stesso con JavaScript?

    
posta Adam Zerner 06.05.2017 - 23:17
fonte

1 risposta

5

Una domanda interessante!

Prima di tutto, rinunciare a qualsiasi argomento di codifica. Il codice lato server può compilare, ridimensionare e raggruppare insieme css, javascript e html dai soliti file separati.

Ora abbiamo una questione puramente tecnica di velocità.

  • È più veloce scaricare un file su due alla stessa ora?

  • È più veloce analizzare un file di grandi dimensioni o due piccoli?

  • Il carico sul server è maggiore in un modo o nell'altro?

  • In che modo il caching influisce sulla situazione quando hai più di una richiesta

  • In che modo il caching influisce sulla situazione in cui hai più di una pagina

Possiamo testare questo in un browser abbastanza facilmente e puoi vedere un leggero vantaggio per la singola richiesta in tutto tranne l'ultima domanda.

Se hai due pagine che condividono css o javascript, il caricamento della seconda pagina con il metodo separato trae vantaggio dalle versioni memorizzate nella cache di quei file in cui la versione a pagina singola scarica tutti i dati due volte.

Se consideriamo che il tuo JavaScript in particolare può essere molte volte più grande del tuo html e tende ad essere usato su ogni pagina. Potete vedere che c'è un vantaggio molto reale nel mettere codice condiviso e css in file separati.

    
risposta data 07.05.2017 - 10:23
fonte

Leggi altre domande sui tag