Se sto progettando un sito web di una sola pagina, è meglio creare un file esterno per il mio codice JS, o semplicemente inserirlo nel codice html? È più veloce caricarlo sulla pagina? Posso modificare le autorizzazioni per negare alle richieste degli utenti il codice, ma la pagina html può comunque chiamare il codice?
Dovresti inserire il tuo codice JS in un file separato perché questo rende più facile testare e sviluppare. La domanda su come viene utilizzato il codice è diversa.
La pubblicazione di HTML e JS ha separatamente il vantaggio che un client può memorizzare nella cache il JS. Ciò richiede che tu invii intestazioni appropriate in modo che il client non invii una nuova richiesta ogni volta. La memorizzazione nella cache è problematica se si desidera eseguire un aggiornamento e quindi si desidera invalidare le cache del client. Un metodo consiste nell'includere un numero di versione nel nome file, ad es. /static/mylibrary-1.12.2.js .
Se il JS è in un file separato non puoi limitare l'accesso ad esso: è difficile (tecnicamente: impossibile) dire se è stata fatta una richiesta a un file JS perché lo hai fatto riferimento alla tua pagina HTML, o perché qualcuno vuole per scaricarlo direttamente. Puoi comunque utilizzare i cookie e rifiutare di servire i clienti che non trasmettono determinati cookie (ma sarebbe sciocco).
Fornire il JS all'interno dell'HTML aumenta le dimensioni di ogni pagina, ma va bene se un client non è in grado di visualizzare più pagine. Poiché il client non emette una richiesta separata per il JS, questa strategia carica la pagina più rapidamente, per la prima volta almeno, ma esiste un punto di pareggio in cui la memorizzazione nella cache è migliore. Puoi includere il JS, ad es. tramite PHP.
Qui il client non ha bisogno di un accesso separato al file JS, che può essere nascosto se lo desideri. Ma chiunque può ancora vedere il codice JS all'interno dell'HTML.
Altre strategie per ridurre al minimo i tempi di caricamento includono
JS minification che riduce la dimensione del file JS che servi. Poiché la minificazione avviene solo una volta durante la distribuzione del codice, questo è un metodo molto efficiente per salvare i byte. OTOH rende il tuo codice più difficile da capire per i visitatori interessati.
In relazione alla minificazione è la pratica di combinare tutti i file JS in un singolo file. Questo riduce il numero di richieste necessarie.
Compressione, che aggiunge un sovraccarico computazionale per ogni richiesta sul client e sul server. Tuttavia, il tempo trascorso (de-) per la compressione è solitamente inferiore al tempo impiegato per la trasmissione dei dati non compressi. La compressione viene generalmente gestita in modo trasparente dal software server.
Queste tecniche si applicano anche ad altre risorse come le immagini.
Il codice JS lato client deve essere visto dal browser (cioè, se la pagina deve utilizzare direttamente JS) - ciò significa che deve essere scaricato dal browser.
Non puoi avere un browser che usi JS sulla pagina se non può scaricarlo.
Da questo punto di vista, non fa una grande differenza se inline il JS o lo metti in un file, anche se la pratica comune è usare un file JS (separazione delle preoccupazioni per uno).
Se hai un codice che non desideri esporre al browser, dovrai utilizzare il codice lato server (ad esempio node.js, php, perl, asp.net, jsp - ci sono così tante opzioni) e interagire con esso dal browser: caricando la pagina iniziale o utilizzando AJAX .
I'm designing a one page website
Se hai letteralmente solo una pagina allora sì, è meglio (dal punto di vista delle prestazioni) servire tutto in un unico file ... fogli di stile, JavaScript e persino immagini (piccole immagini in linea con gli URI di dati). Ciò elimina le richieste HTTP aggiuntive richieste per recuperare risorse esterne relativamente lente.
Il file risultante dovrebbe essere compresso con gzip prima di essere pubblicato, il che ridurrà enormemente la dimensione della risposta tutto testo.
Dovresti comunque considerare di avere immagini di grandi dimensioni esterne alla pagina, poiché esistono limiti alla dimensione degli URI dei dati e alla compatibilità del browser. (ad esempio IE8 ha un limite di 32 KB, che equivale a una dimensione effettiva del file di circa 23 KB a causa della natura della codifica base64.)
Can I change the permissions to deny the users requests for the code, but the html page can still call the code?
No. Nel migliore dei casi il codice può essere offuscato per "nasconderlo" dall'osservatore casuale, ma non offre alcuna protezione reale.
Beh, dipende dalla quantità di codice e quanto sei serio nell'essere un programmatore / ingegnere del software contro un programmatore. Ho lavorato con un gruppo di progettisti che hanno inserito brevi frammenti di codice direttamente in HTML e, anche se mi sono preoccupato, ha funzionato davvero.
Anche se non è qualcosa che farei io stesso, e se vuoi conoscere le migliori pratiche di sviluppo del software, ti consiglio caldamente di inviare tutto in un file *.js esterno e caricarlo tramite tag <script> .
Riguardo al tuo secondo punto, no non puoi negare all'utente o al browser di visualizzare il tuo codice, c'è qualcosa chiamato obfuscation che renderà il tuo codice più difficile da leggere, tuttavia le prestazioni diminuiranno.
is it better to create external file for my JS code, or just put it in the html code?
È meglio creare un file esterno per il tuo codice JS. È anche meglio avere uno o due file che servi al client. Ma è anche meglio avere il tuo codice JS diviso tra file multipli per problemi di manutenibilità. Per poter eseguire questa operazione, puoi utilizzare i preprocessori come Gulp che combinano i diversi file JS in un unico file.
Servire meno file è meglio perché il client avrà meno richieste HTTP da gestire.
Is putting it on the page faster to load?
Sì, ovviamente è più veloce dato che fai una sola richiesta per l'HTML, mentre faresti molte richieste (almeno 2) con il tuo codice JS come esterno. Questo è solo se il tuo codice JS non è minimizzato in entrambi i lati, e questo non tiene conto di quanto sarà più difficile mantenere il tuo codice se è tutto in un'unica pagina HTML.
Can I change the permissions to deny the users requests for the code, but the html page can still call the code?
No, non puoi. Il codice JS, come il codice CSS e il codice HTML, è contenuto statico. Ciò significa che una volta che è nel browser, il client può scaricarlo e il suo contenuto interamente. Ogni singolo file, immagine, script è aperto per essere scaricato. Ma , puoi minify / uglify il tuo codice in modo che sia più difficile perché un essere umano lo usi Questa è solo una conseguenza dell'ugrificazione, che è stata resa per le prestazioni prima.
Molti vantaggi di separare il contenuto html e javascript in file separati:
Leggi altre domande sui tag javascript