È più veloce da caricare se tutte le risorse della pagina web sono compilate in un singolo file HTML?

Question

E se avessi una fase di compilazione per il mio sito Web che trasformasse tutti gli script e gli stili esterni in un singolo file HTML con tag incorporati <script> e <style>? Questo migliorerebbe i tempi di caricamento della pagina a causa del fatto di non dover inviare GET aggiuntivi per i file esterni? Se è così, perché non viene fatto più spesso?

Answer 1

Impossibile dire in generale, perché è molto situazionale.

• Se si stanno prelevando risorse da diversi server, queste richieste possono rallentare il caricamento della pagina (soprattutto con alcuni DNS errati sul lato della visita).
• La richiesta di molti file diversi può anche rallentare il caricamento della pagina anche se provengono dalla stessa origine/server.
• Ricorda che non tutti hanno Internet gigabit (o anche a livello di megabit). Quindi, inserire tutto direttamente nel file HTML (inlining o utilizzando gli URI dei dati) ridurrà definitivamente l'overhead della rete (meno richieste, meno intestazioni, ecc.).
• In aggiunta (e peggiorando ulteriormente il punto precedente), si interromperanno anche molte altre funzionalità spesso utilizzate per ridurre i tempi di caricamento della pagina. Ad esempio, le risorse non possono essere memorizzate nella cache, né localmente né su alcuni proxy, e vengono sempre trasferite. Questo potrebbe essere costoso sia per il visitatore che per la parte ospitante.

così spesso il modo migliore per affrontare questo sta la terra di mezzo, se tempi di caricamento sono un problema per voi:

• Se stai usando gli script di terze parti, ad esempio, jQuery, prendili da un CDN pubblico ospitato che è utilizzato anche da altre pagine. Se sei fortunato, il browser del tuo visitatore avrà una copia memorizzata nella cache e non eseguirà la richiesta.

• I propri script devono essere condensati e potenzialmente ridotti a un singolo script (strumenti come browersify, webpack, ecc.). Questo non deve includere spesso parti che cambiano, in quanto ciò ti obbligherebbe a trasferire ancora più dati.

• Se hai script o risorse che fanno solo parte dell'esperienza del tuo attuale visitatore (come lo stato di accesso, i colori scelti nelle preferenze dell'utente, ecc.), Va bene inserirli direttamente nell'HTML genitore file, se quel file è comunque personalizzato e la consegna come file separati non funzionerebbe o causerebbe un sovraccarico. Un esempio perfetto per questo sarebbe token CSRF. Non farlo se sei in grado di consegnare qualche file HTML statico che viene riempito/aggiornato da Javascript però.

Answer 2

Sì, sarà migliorare i tempi di caricamento della pagina, ma ancora questo metodo non è usato spesso a causa di questi motivi:

1. debug sarà difficile per questo.
2. Se vogliamo aggiornare in seguito, non sarà così facile. file
3. css e .js separati rimuovere questi problemi

E sì, per caricamento della pagina più veloce, è possibile utilizzare un sistema di compilazione come GRUNT, GULP, BRUNCH ecc per migliorare le prestazioni.