Quali sono i pro ei contro di aggiunta di elementi
Altri suggerimenti
Uno dei principali svantaggi è il browser incompatibilità. Non tutti i browser in modo corretto prendere e incorporare le risorse nel DOM, quindi è rischioso utilizzare questo approccio. Questo è più vero per i fogli di stile di script.
Un altro problema è uno di manutenibilità. Concatenazione di stringhe e la scrittura di aggiungere elementi DOM sul client'side può diventare un incubo di manutenzione. E 'meglio metodi di utilizzo DOM quali createElement per creare semanticamente elementi.
Un vantaggio evidente è che si avvale condizionale di risorse molto più facile. Si può avere la logica che determina quali risorse di carico, riducendo così il consumo di larghezza di banda e il tempo di elaborazione complessivo per la pagina. Vorrei usare una chiamata di libreria come jQuery $ .getScript () per caricare gli script contro document.write. Il vantaggio è che questo tipo di approccio è più pulita e permette anche di avere il codice eseguito quando la richiesta è stata completata o non.
Bene, mi può anche gettare il cappello sul ring su questo ...
Se si esamina biblioteca chiusura di Google, base.js, vedrete che document.write è utilizzato nella loro funzione writeScriptTag_(). Questa è una parte essenziale del sistema di gestione delle dipendenze che 'chiusura' fornisce, ed è un enorme vantaggio quando si crea un complicato, multi-file, applicazioni libreria javascript-base - permette il file / prerequisiti codice determinare l'ordine di caricamento. Attualmente utilizziamo questa tecnica e stiamo avendo qualche problema con esso. TBH, non abbiamo avuto un singolo problema con la compatibilità del browser, e abbiamo regolarmente test su IE 6/7/8, FF3 / 2, 4/5 Safari e Chrome più recente.
L'unico svantaggio che abbiamo avuto finora è che può essere difficile da rintracciare problemi causati caricando una risorsa per due volte o, in mancanza di caricare uno a tutti. Dal momento che l'atto di risorse di carico è programmatico, è soggetto ad errori programmatici e, a differenza aggiungendo i tag direttamente al codice HTML, può essere difficile da vedere ciò che l'ordine di carico esatto è. Tuttavia, questo problema può essere in gran parte superato utilizzando una biblioteca con una qualche forma di sistema di gestione delle dipendenze come la chiusura, o dojo.
Modifica ho fatto un paio di commenti a questa natura, ma ho pensato che la cosa migliore per riassumere nella mia risposta: Ci sono alcuni problemi con dojo.require () e jQuery.getScript () (sia che ultimiately eseguire una richiesta AJAX e eval).
- Caricamento tramite Ajax mezzi di scripting senza croce - vale a dire senza javascript carico che non è dal tuo sito. Questo sarà un problema se si desidera includere https://ajax.googleapis.com come indicato nella descrizione.
- script Eval'd non apparirà nella lista di un debugger JavaScript di script della pagina, rendendo il debug molto impegnativo. Le versioni recenti di Firebug vi mostreranno eval'd codice, tuttavia i nomi dei file sono persi facendo l'atto di impostare punti di interruzione noioso. Per quanto ne so, Webkit javascript console e strumenti di sviluppo IE8 non Mostra script eval'd.
Ha il vantaggio che non è necessario ripetere i riferimenti di script in ogni file HTML. Lo svantaggio è che il browser deve prendere ed eseguire il file javascript principale prima di poter caricare gli altri.
Credo che uno dei vantaggi che riuscivo a pensare sarebbe se si utilizzano questi script su più pagine, è sufficiente ricordarsi di includere uno script e consente di risparmiare un pò di spazio.
In Google Page Speed, hanno altamente scoraggiare da usando questa tecnica, perché rende le cose più lento. A parte il sequenziale del script.js prima di tutti gli altri, c'è un altro problema:
Browser moderni usano parser speculative in modo più efficiente le risorse esterne scoprire [...] Così, usando document.write di JavaScript () per recuperare risorse esterne rende impossibile per il parser speculativa alla scoperta di quelle risorse, che possono ritardare il download, l'analisi e il rendering di tali risorse.
E 'anche possibile che questo è stato scritto come una raccomandazione da una società di SEO per rendere l'elemento di testa più breve se possibile, in modo unico contenuto è più vicino alla parte superiore del documento - anche la creazione di un più alto rapporto text-to-HTML. Anche se lo fa suono, all-in-tutto, come non è un buon modo di fare questo; anche se sarebbe rendere la manutenzione più tempo, un approccio migliore sarebbe probabilmente a condensare javascript in un unico file .js e CSS in un unico file css, se fosse ritenuto assolutamente necessario per ridurre le dimensioni dell'elemento testa.
Un grande svantaggio è che l'aggiunta di scripts nella testa per mettere in pausa l'elaborazione del documento finché questi script sono stati scaricati completamente analizzati e giustiziati (perché il browser pensa che possono utilizzare document.write). -. Questo farà male la reattività
Ora giorni si consiglia di mettere i tag di script a destra befo </body>. Naturalmente questo non è possibile al 100% delle volte, ma se si utilizza unobtrusve JavaScript (come si dovrebbe), tutti gli script possono essere respositioned alla fine del documento.
HTML5 si avvicinò con l'attributo async che suggerisce il browser solo per eseguire gli script dopo che il documento principale è stato caricato. Questo è il comportamento degli script script inserito in molti browser, ma notin tutti loro.
I consigli contro utilizzando document.write a tutti i costi. Anche senza di essa, questo si traduce in una richiesta in più verso il server. (Ci piace inimze il numero di richieste, per esempio con css sprite .)
E sì, come altri citati in precedenza, se scriping è disabilitata la pagina verrà mostrata senza CSS (che lo rende potenzialmente inutilizzabile).
-
Se JavaScript è disabilitata -. Non verrà aggiunto a tutti gli elementi
<script> and <link> -
Se si inserisce il codice JavaScript funzioni init nella parte inferiore della pagina (che è una pratica buona) e il collegamento CSS con Javascript, può causare un certo ritardo prima che venga caricato CSS (il layout rotto sarà visibile per un breve periodo ).
