So che document.writeè considerata una cattiva pratica; e spero di compilare un elenco di motivi per presentare a un fornitore di terze parti il ​​motivo per cui non dovrebbero utilizzare document.writenelle implementazioni del loro codice di analisi.

Di seguito, includi il motivo della richiesta di risarcimento document.writecome cattiva pratica.

Alcuni dei problemi più gravi:

• document.write (d'ora in poi DW) non funziona in XHTML

• DW non modifica direttamente il DOM, impedendo ulteriori manipolazioni (cercando di trovare prove di ciò, ma nella migliore delle ipotesi situazionali)

• Il DW eseguito al termine del caricamento della pagina sovrascriverà la pagina o scriverà una nuova pagina o non funzionerà

• DW viene eseguito dove rilevato: non può essere iniettato in un determinato punto del nodo

• DW sta effettivamente scrivendo testo serializzato che non è il modo in cui il DOM funziona concettualmente ed è un modo semplice per creare bug (.innerHTML ha lo stesso problema)

Molto meglio usare i metodi di manipolazione DOM sicuri e compatibili con DOM

In realtà non c'è nulla di sbagliato in document.writesé. Il problema è che è davvero facile abusarne. Davvero, anche.

In termini di fornitori che forniscono codice analitico (come Google Analytics), in realtà è il modo più semplice per loro di distribuire tali frammenti

1. Mantiene gli script piccoli
2. Non devono preoccuparsi di ignorare gli eventi di caricamento già stabiliti o di includere l'astrazione necessaria per aggiungere eventi di caricamento in modo sicuro
3. È estremamente compatibile

Finché non provi a usarlo dopo che il documento è stato caricato ,document.writenon è intrinsecamente malvagio, secondo la mia modesta opinione.

Un altro uso legittimo document.writederiva dall'esempio HTML5 Boilerplate index.html .

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.3.min.js"><\/script>')</script>

Ho anche visto la stessa tecnica per utilizzare il polyfill di analisi / stringa JSON json2.js ( necessario per IE7 e versioni successive ).

<script>window.JSON || document.write('<script src="json2.js"><\/script>')</script>

Può bloccare la tua pagina

document.writeFunziona solo durante il caricamento della pagina; Se lo chiami dopo aver completato il caricamento della pagina, sovrascriverà l'intera pagina.

Questo significa effettivamente che devi chiamarlo da un blocco di script in linea - E ciò impedirà al browser di elaborare parti della pagina che seguono. Gli script e le immagini non verranno scaricati fino al completamento del blocco di scrittura.

Pro:

• È il modo più semplice per incorporare contenuti incorporati da uno script esterno (al tuo host / dominio).
• È possibile sovrascrivere l'intero contenuto in un frame / iframe. Usavo molto questa tecnica per i pezzi di menu / navigazione prima che fossero più ampiamente disponibili le più moderne tecniche Ajax (1998-2002).

con:

• Serializza il motore di rendering in pausa fino a quando detto script esterno non viene caricato, il che potrebbe richiedere molto più tempo di uno script interno.
• Di solito è usato in modo tale che lo script sia inserito nel contenuto, che è considerato in cattiva forma.

Ecco il mio valore di due anni, in generale non dovresti usare document.writeper il sollevamento di carichi pesanti, ma c'è un caso in cui è sicuramente utile:

http://www.quirksmode.org/blog/archives/2005/06/three_javascrip_1.html

L'ho scoperto di recente provando a creare una galleria di cursori AJAX. Ho creato due div annidati e applicato width/ heighte overflow: hiddenall'esterno <div>con JS. Questo in modo che, nel caso in cui il browser avesse JS disabilitato, il div galleggiava per ospitare le immagini nella galleria - un bel degrado grazioso.

La cosa è, come con l'articolo sopra, questo dirottamento JS del CSS non è entrato in azione fino a quando la pagina non è stata caricata, causando un lampo momentaneo mentre il div veniva caricato. Quindi avevo bisogno di scrivere una regola CSS, o includere un foglio, come pagina caricata.

Ovviamente, questo non funzionerà in XHTML, ma poiché XHTML sembra essere una specie di anatra morta (e viene visualizzato come tag soup in IE), varrebbe la pena rivalutare la tua scelta di DOCTYPE ...

Sovrascrive il contenuto della pagina che è il motivo più ovvio ma non lo definirei "cattivo".

Non serve molto a meno che non si stia creando un intero documento utilizzando JavaScript, nel qual caso è possibile iniziare con document.write.

Anche così, non stai davvero sfruttando il DOM quando usi document.write - stai semplicemente scaricando una goccia di testo nel documento, quindi direi che è una cattiva forma.

Rompe le pagine usando il rendering XML (come le pagine XHTML).

Migliore : alcuni browser tornano al rendering HTML e tutto funziona bene.

Probabile : alcuni browser disabilitano la funzione document.write () in modalità rendering XML.

Peggio ancora : alcuni browser generano un errore XML ogni volta che si utilizza la funzione document.write ().

In cima alla mia testa:

1. document.writedeve essere utilizzato nel caricamento della pagina o nel corpo. Quindi, se si desidera utilizzare lo script in qualsiasi altro momento per aggiornare il documento del contenuto della pagina, scrivere è praticamente inutile.

2. Tecnicamente document.writeaggiornerà solo le pagine HTML non XHTML / XML. IE sembra perdonare abbastanza questo fatto, ma altri browser non lo saranno.

http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite

Chrome potrebbe bloccare l' document.writeinserimento di uno script in alcuni casi. Quando ciò accade, verrà visualizzato questo avviso nella console:

Uno script con blocco incrociato, origine incrociata, ..., viene invocato tramite document.write. Questo potrebbe essere bloccato dal browser se il dispositivo ha una scarsa connettività di rete.

Riferimenti:

• Questo articolo su developers.google.com è più dettagliato.
• https://www.chromestatus.com/feature/5718547946799104

Violazione del browser

.writeè considerata una violazione del browser in quanto impedisce al parser di eseguire il rendering della pagina. Il parser riceve il messaggio che il documento è in fase di modifica; quindi, viene bloccato fino a quando JS non ha completato il suo processo. Solo in questo momento il parser riprenderà.

Prestazione

La principale conseguenza dell'utilizzo di tale metodo è la riduzione delle prestazioni. Il browser impiegherà più tempo a caricare il contenuto della pagina. La reazione avversa sul tempo di caricamento dipende da ciò che viene scritto nel documento. Non vedrai molta differenza se stai aggiungendo un <p>tag al DOM invece di passare un array di 50-alcuni riferimenti alle librerie JavaScript (qualcosa che ho visto nel codice di lavoro e ha provocato un ritardo di 11 secondi - di ovviamente, questo dipende anche dal tuo hardware).

Tutto sommato, è meglio evitare questo metodo se puoi aiutarlo.

Per ulteriori informazioni, consultare Intervening contro document.write ()

Sulla base dell'analisi effettuata da Lighthouse Audit di Google-Chrome Dev Tools ,

Per gli utenti con connessioni lente, gli script esterni iniettati dinamicamente tramite document.write()possono ritardare il caricamento della pagina di decine di secondi.

• Un semplice motivo per cui document.writeè una cattiva pratica è che non è possibile elaborare uno scenario in cui non è possibile trovare un'alternativa migliore.
• Un altro motivo è che hai a che fare con stringhe invece che con oggetti (è molto primitivo).
• Si aggiunge solo ai documenti.
• Non ha nulla della bellezza del modello MVC (Model-View-Controller) ad esempio .
• È molto più potente presentare contenuti dinamici con ajax + jQuery o angularJS .

Si può pensare a document.write () (e .innerHTML) come a valutare una stringa di codice sorgente. Questo può essere molto utile per molte applicazioni. Ad esempio, se si ottiene il codice HTML come stringa da qualche sorgente, è utile semplicemente "valutarlo".

Nel contesto di Lisp, la manipolazione del DOM sarebbe come manipolare una struttura di elenco, ad esempio creare l'elenco (arancione) facendo:

(cons 'orange '())

E document.write () sarebbe come valutare una stringa, ad esempio creare un elenco valutando una stringa di codice sorgente come questa:

(eval-string "(cons 'orange '())")

Lisp ha anche l'utilissima capacità di creare codice usando la manipolazione dell'elenco (come usare lo "stile DOM" per creare un albero di analisi JS). Ciò significa che è possibile creare una struttura di elenco utilizzando lo "stile DOM", anziché lo "stile stringa", quindi eseguire quel codice, ad esempio in questo modo:

(eval '(cons 'orange '()))

Se si implementano strumenti di codifica, come semplici editor live, è molto utile poter valutare rapidamente una stringa, ad esempio utilizzando document.write () o .innerHTML. Lisp è l'ideale in questo senso, ma puoi fare cose molto interessanti anche in JS, e molte persone lo fanno, come http://jsbin.com/

Gli svantaggi di document.write dipendono principalmente da questi 3 fattori:

a) Implementazione

Document.write () viene utilizzato principalmente per scrivere contenuto sullo schermo non appena è necessario quel contenuto. Ciò significa che accade ovunque, in un file JavaScript o all'interno di un tag script all'interno di un file HTML. Con il tag di script posizionato ovunque all'interno di tale file HTML, è una cattiva idea avere istruzioni document.write () all'interno di blocchi di script che si intrecciano con HTML all'interno di una pagina web.

b) Rendering

Un codice ben progettato in generale prenderà qualsiasi contenuto generato dinamicamente, lo memorizzerà in memoria, continuerà a manipolarlo mentre passa attraverso il codice prima che venga finalmente sputato sullo schermo. Quindi, per ribadire l'ultimo punto della sezione precedente, il rendering del contenuto sul posto può essere reso più veloce di altri contenuti su cui si può fare affidamento, ma potrebbe non essere disponibile per l'altro codice che a sua volta richiede che il contenuto sia reso per l'elaborazione. Per risolvere questo dilemma dobbiamo liberarci di document.write () e implementarlo nel modo giusto.

c) Manipolazione impossibile

Una volta scritto, è finito e finito. Non possiamo tornare indietro per manipolarlo senza toccare il DOM.

Non credo che usare document.write sia una cattiva pratica. In parole semplici è come un'alta tensione per le persone inesperte. Se lo usi nel modo sbagliato, vieni cucinato. Ci sono molti sviluppatori che hanno usato questo e altri metodi pericolosi almeno una volta e non riescono mai a scavare nei loro fallimenti. Invece, quando qualcosa va storto, salvano e usano qualcosa di più sicuro. Quelli sono quelli che fanno tali dichiarazioni su quella che è considerata una "cattiva pratica".

È come formattare un disco rigido, quando è necessario eliminare solo pochi file e quindi dire "la formattazione del disco è una cattiva pratica".

Penso che il problema più grande sia che tutti gli elementi scritti tramite document.write vengano aggiunti alla fine degli elementi della pagina. Questo è raramente l'effetto desiderato con i moderni layout di pagina e AJAX. (devi tenere presente che gli elementi nel DOM sono temporali e quando l'esecuzione dello script può influire sul suo comportamento).

È molto meglio impostare un elemento segnaposto sulla pagina, quindi manipolarlo innerHTML.