Sebbene sia sempre consigliabile inserire codice JavaScript e CSS in file appropriati (come .js e .css), la maggior parte dei principali siti Web (come Amazon, Facebook, ecc.) Inserisce una parte significativa del codice JavaScript e CSS direttamente all'interno del Pagina HTML.Inserisci CSS e JavaScript nei file o nel codice HTML principale?
Dove è la scelta migliore?
http://developer.yahoo.com/performance/rules.html#external
Yahoo (anche se hanno molti stili inline e script), raccomanda che li rende esterno. Credo che la velocità della pagina di Google usata per (o lo sia ancora?) Faccia lo stesso.
È davvero una cosa logica separarli. Ci sono così tanti vantaggi nel mantenere CSS e JS separati dall'HTML.Cose come la gestione logica del codice, il caching di quelle pagine, la dimensione inferiore della pagina (preferiresti una richiesta di ~ 200ms per una risorsa cache 400kb, o un ritardo di 4000ms dal dover scaricare quei dati su ogni pagina?), Opzioni SEO (meno merda per google per vedere quando gli script/gli stili sono esterni), più facile da ridimensionare gli script esterni (strumenti online ecc.), caricarli in modo sincrono da server diversi ....
Questo dovrebbe essere il tuo obiettivo principale in qualsiasi sito web. Tutti gli stili che compongono l'intero sito Web devono trovarsi in un unico file (o file per ogni pagina, quindi uniti e minificati se aggiornati), lo stesso per javascript.
Nel mondo reale (non fare un progetto per te stesso, farlo per un cliente o stakeholder che vuole ottenere risultati), l'unica volta in cui non ha senso caricare in un'altra risorsa javascript o in un altro foglio di stile (e quindi usa gli stili in linea/javascript) è se esiste una sorta di informazione dinamica che si trova su un tipo di per utente, per sessione o periodo per-tempo che non può essere realizzato semplicemente in qualsiasi altro modo. Esempio: quando il mio sito web ha una promozione, eseguiamo il dump di un tag script con un piccolo oggetto d'informazione JSON. Poiché non riduciamo e uniamo più file, è più logico includerlo nella pagina. Certo, ci sono altri modi per farlo, ma costa $ 20 per farlo, mentre potrebbe costare> $ 100 per farlo in un altro modo.
Forse Amazon/Facebook/Google ecc utilizzano così tanto codice inline è così che i loro server non sono tassati così tanto. Non sono troppo sicuro del benchmarking tra la richiesta di un file da 1 MB in un solo hit o la richiesta di 10 file da 100 KB (presumendo 1 MB/10 = 100 KB per l'interesse degli esempi), ma quale sarebbe più veloce? Potenzialmente il file da 1 MB, MA le richieste più piccole possono essere caricate in modo sincrono, il che significa che ognuna di queste 10 richieste potrebbe provenire da un server/dominio separato potenzialmente, riducendo così il tempo di caricamento complessivo.
Inoltre, le home page di Google ad esempio sembrano scaricare una serie di informazioni JSON per i widget, presumibilmente perché compila tutte le informazioni da varie fonti, le ridimensiona, la memorizza nella cache, quindi inserisce nella pagina, quindi le funzioni javascript costruire il layout (potenza di elaborazione lato client piuttosto che lato server).
"l'informazione dinamica" è cattiva. Generare js dinamicamente è malvagio. Lo stai facendo male. Archiviare i dati nell'HTML o esporli a REST. – Raynos
Hmm, come sarebbe una funzione di conto alla rovescia javascript ottenere la data per il conto alla rovescia per senza scaricarlo sulla pagina in qualche modo poi ??? – Benno
perché sta ottenendo un conto alla rovescia? anche così metterlo in HTML. Personalmente lo posizionerei in un'animazione CSS3 – Raynos
Un'indagine interessante potrebbe essere se includono vari file .css indipendentemente dai blocchi di stile che si stanno vedendo. Forse è sovraccarico o forse è conveniente.
Ho scoperto che, mentre si lavora con diversi stili di sviluppatori di interfacce (e di distribuzione dei contenuti), questa convenienza/autorità spesso vince di fronte alle scadenze e "a fare il lavoro". In un progetto su larga scala potrebbero esserci fattori come "No, non stai toccando i nostri fogli di stile", o forse se non c'è un foglio di stile che utilizza una richiesta http, allora la convenienza ha vinto una battaglia contro le buone pratiche.
Inserisci i file .js in più file, quindi impacchetta, riduci e gzip in un unico file.
Mantieni il tuo codice HTML in più file separati.
Inserire il file .css in più file, quindi raggruppare, ridimensionare e gzip in un unico file.
Quindi si invia semplicemente un file css e un file js al client da memorizzare nella cache.
non in linea con il codice HTML.
Se Inline loro poi qualsiasi modifica del CSS o html o js forze per utente a scaricare tutti e tre di nuovo.
Il motivo principale per cui i principali siti Web hanno js & cs nei loro file, è dovuto al fatto che il codice dei principali siti web è marcato. Le grandi aziende non rispettano gli standard e le migliori pratiche, lo hanno solo hackerato fino a quando non funziona e poi dicono "perché sprecare denaro sul nostro sito web, funziona, no?".
Non guardare esempi di siti web in diretta, perché il 99% di tutti gli esempi su Internet mostrano cattive pratiche.
Anche per amore di dio, Separazione delle preoccupazioni per favore. È necessario mai e poi mai utilizzare in linea javascript o css inline in pagine html.
Hai assolutamente ragione, questo è un caso di bene contro il male - + Bruce, hai trovato il male, @Raynos, stai spingendo il bene. – danjah
Se il codice css e javascript è per un utilizzo globale, è consigliabile inserirlo in file appropriati. Altrimenti, se il codice è usato solo da una certa pagina, come la home page, metterli direttamente in html è accettabile, ed è buono per la manutenzione.
"buono per manutenzione". Da quando l'accoppiamento duro è sempre buono per la manutenzione. – Raynos
C'è un punto di equilibrio da scegliere, se una pagina è in continua evoluzione, ogni volta che devi cambiare js/css e gzip di nuovo. E non è necessario che l'utente ricarichi js/css se ha già memorizzato nella cache il js/css principale. – xdazz
La nostra squadra mantiene tutto separato. Tutte le risorse come questa vanno in una cartella denominata _Content.
CSS va in _Content/css/xxx.js
JS va in _Content/js/lib/xxx.js (Per tutti i pacchetti di libreria)
eventi pagina personalizzati e funzioni vengono chiamati dalla pagina, ma vengono messi in un file JS principale _Content/js/Main.js
immagini andranno nello stesso luogo sotto _Content/images/xxx.x
Questo è solo il modo in cui stenderlo in quanto mantiene il markup HTML come dovrebbe essere, per il markup.
Penso che mettere css e js nell'html principale renda la pagina molto veloce.
Anche se è difficile da misurare in una connessione Internet veloce. –
Questa è un'osservazione interessante. Mi chiedo se è perché la maggior parte del tempo è dedicato alla configurazione di una connessione HTTP? Se il sovraccarico è abbastanza grande, probabilmente si desidera imballare il più possibile nel carico utile effettivo. –
Sì, domanda interessante (anche se forse più adatta su webmasters.SE?) –
Molti non saranno d'accordo, ma non fa molta differenza. Metto sempre il css e js che scrivo nella pagina html. È molto più comodo cambiarlo quando posso leggere facilmente le cose. –