Sé que document.writese considera una mala práctica; y espero compilar una lista de razones para enviar a un proveedor de terceros por qué no deberían usar document.writeen implementaciones de su código de análisis.

Incluya a continuación su razón para reclamar document.writecomo mala práctica.

Algunos de los problemas más serios:

• document.write (en adelante DW) no funciona en XHTML

• DW no modifica directamente el DOM, evitando una mayor manipulación (tratando de encontrar evidencia de esto, pero en el mejor de los casos).

• DW ejecutado después de que la página haya terminado de cargarse sobrescribirá la página, o escribirá una nueva página, o no funcionará

• DW se ejecuta donde se encuentra: no puede inyectar en un punto de nodo dado

• DW está escribiendo efectivamente texto serializado que no es la forma en que el DOM funciona conceptualmente, y es una manera fácil de crear errores (.innerHTML tiene el mismo problema)

Mucho mejor usar los métodos de manipulación DOM seguros y amigables con DOM

En realidad no hay nada de malo document.write, per se. El problema es que es realmente fácil usarlo mal. Demasiado, incluso.

En términos de proveedores que suministran código de análisis (como Google Analytics), en realidad es la forma más fácil para que distribuyan dichos fragmentos

1. Mantiene los guiones pequeños
2. No tienen que preocuparse por anular eventos de carga ya establecidos o incluir la abstracción necesaria para agregar eventos de carga de manera segura
3. Es extremadamente compatible

Siempre y cuando no intentes usarlo después de que el documento se haya cargado ,document.writeno es inherentemente malo, en mi humilde opinión.

Otro uso legítimo de document.writeproviene del ejemplo 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>

También he visto la misma técnica para usar json2.js JSON parse / stringify polyfill ( necesario para IE7 y versiones posteriores ).

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

Puede bloquear tu página

document.writesolo funciona mientras se carga la página; Si lo llama después de que la página haya terminado de cargarse, sobrescribirá toda la página.

Esto efectivamente significa que debe llamarlo desde un bloque de secuencia de comandos en línea, y eso evitará que el navegador procese partes de la página que sigue. Los scripts y las imágenes no se descargarán hasta que finalice el bloque de escritura.

Pro:

• Es la forma más fácil de incrustar contenido en línea desde un script externo (a su host / dominio).
• Puede sobrescribir todo el contenido en un marco / iframe. Solía ​​usar esta técnica mucho para menús / piezas de navegación antes de que las técnicas más modernas de Ajax estuvieran ampliamente disponibles (1998-2002).

Estafa:

• Se serializa el motor de renderizado para pausar hasta que se carga dicho script externo, lo que podría llevar mucho más tiempo que un script interno.
• Por lo general, se usa de tal manera que el script se coloca dentro del contenido, lo que se considera de mala forma.

Este es mi valor de dos peniques, en general no debe usarlo document.writepara levantar objetos pesados, pero hay una instancia en la que definitivamente es útil:

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

Descubrí esto recientemente tratando de crear una galería deslizante AJAX. Creé dos divs anidados, y apliqué width/ heighty overflow: hiddenal exterior <div>con JS. Esto fue para que en el caso de que el navegador tuviera JS deshabilitado, el div flotaría para acomodar las imágenes en la galería, una degradación agradable y elegante.

La cosa es, como con el artículo anterior, este secuestro JS del CSS no se activó hasta que la página se cargó, causando un destello momentáneo a medida que se cargaba el div. Entonces necesitaba escribir una regla CSS, o incluir una hoja, a medida que se cargaba la página.

Obviamente, esto no funcionará en XHTML, pero dado que XHTML parece ser algo así como un pato muerto (y se representa como etiqueta de sopa en IE), podría valer la pena reevaluar su elección de DOCTYPE ...

Sobrescribe el contenido de la página, que es la razón más obvia, pero no lo llamaría "malo".

Simplemente no tiene mucho uso a menos que esté creando un documento completo usando JavaScript, en cuyo caso puede comenzar con document.write.

Aun así, en realidad no estás aprovechando el DOM cuando usas document.write, solo estás volcando una gota de texto en el documento, así que diría que es una mala forma.

Rompe las páginas usando la representación XML (como las páginas XHTML).

Mejor : algunos navegadores vuelven a la representación HTML y todo funciona bien.

Probable : algunos navegadores deshabilitan la función document.write () en modo de representación XML.

Lo peor : algún navegador generará un error XML siempre que use la función document.write ().

La parte superior de mi cabeza:

1. document.writedebe usarse en la carga de la página o la carga del cuerpo. Entonces, si desea usar el script en cualquier otro momento para actualizar el documento de contenido de su página, la escritura es prácticamente inútil.

2. Técnicamente document.writesolo actualizará páginas HTML, no XHTML / XML. IE parece ser bastante indulgente con este hecho, pero otros navegadores no lo serán.

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

Chrome puede bloquear document.writeque inserte una secuencia de comandos en ciertos casos. Cuando esto sucede, mostrará esta advertencia en la consola:

Se invoca un script de bloqueo cruzado de origen, ..., a través de document.write. El navegador puede bloquear esto si el dispositivo tiene una conectividad de red deficiente.

Referencias

• Este artículo en developers.google.com entra en más detalles.
• https://www.chromestatus.com/feature/5718547946799104

Infracción del navegador

.writese considera una violación del navegador, ya que impide que el analizador muestre la página. El analizador recibe el mensaje de que el documento se está modificando; por lo tanto, se bloquea hasta que JS haya completado su proceso. Solo en este momento se reanudará el analizador.

Actuación

La mayor consecuencia de emplear tal método es un rendimiento reducido. El navegador tardará más en cargar el contenido de la página. La reacción adversa en el tiempo de carga depende de lo que se escriba en el documento. No verá mucha diferencia si está agregando una <p>etiqueta al DOM en lugar de pasar un conjunto de 50 referencias a bibliotecas de JavaScript (algo que he visto en el código de trabajo y resultó en un retraso de 11 segundos - de Por supuesto, esto también depende de su hardware).

Con todo, es mejor mantenerse alejado de este método si puede evitarlo.

Para obtener más información, vea Intervenir contra document.write ()

Según el análisis realizado por Lighthouse Audit de Google-Chrome Dev Tools ,

Para los usuarios con conexiones lentas, las secuencias de comandos externas inyectadas dinámicamente document.write()pueden retrasar la carga de la página en decenas de segundos.

• Una razón simple por la cual document.writees una mala práctica es que no puede encontrar un escenario en el que no pueda encontrar una mejor alternativa.
• Otra razón es que se trata de cadenas en lugar de objetos (es muy primitivo).
• Solo se agrega a los documentos.
• No tiene nada de bello, por ejemplo, el patrón MVC (Modelo-Vista-Controlador) .
• Es mucho más poderoso presentar contenido dinámico con ajax + jQuery o angularJS .

Uno puede pensar en document.write () (y .innerHTML) como la evaluación de una cadena de código fuente. Esto puede ser muy útil para muchas aplicaciones. Por ejemplo, si obtiene código HTML como una cadena de alguna fuente, es útil simplemente "evaluarlo".

En el contexto de Lisp, la manipulación DOM sería como manipular una estructura de lista, por ejemplo, crear la lista (naranja) haciendo:

(cons 'orange '())

Y document.write () sería como evaluar una cadena, por ejemplo, crear una lista evaluando una cadena de código fuente como esta:

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

Lisp también tiene la capacidad muy útil de crear código usando la manipulación de listas (como usar el "estilo DOM" para crear un árbol de análisis JS). Esto significa que puede crear una estructura de lista utilizando el "estilo DOM", en lugar del "estilo de cadena", y luego ejecutar ese código, por ejemplo, así:

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

Si implementa herramientas de codificación, como simples editores en vivo, es muy útil tener la capacidad de evaluar rápidamente una cadena, por ejemplo, usando document.write () o .innerHTML. Lisp es ideal en este sentido, pero también puedes hacer cosas muy interesantes en JS, y muchas personas lo están haciendo, como http://jsbin.com/

Las desventajas de document.write dependen principalmente de estos 3 factores:

a) Implementación

Document.write () se usa principalmente para escribir contenido en la pantalla tan pronto como se necesita ese contenido. Esto significa que ocurre en cualquier lugar, ya sea en un archivo JavaScript o dentro de una etiqueta de script dentro de un archivo HTML. Con la etiqueta de script colocada en cualquier lugar dentro de dicho archivo HTML, es una mala idea tener declaraciones document.write () dentro de bloques de script que se entrelazan con HTML dentro de una página web.

b) Representación

El código bien diseñado en general tomará cualquier contenido generado dinámicamente, lo almacenará en la memoria, lo seguirá manipulando a medida que pase por el código antes de que finalmente se escupe en la pantalla. Por lo tanto, para reiterar el último punto en la sección anterior, la representación del contenido en el lugar puede procesarse más rápido que otro contenido en el que se puede confiar, pero puede no estar disponible para el otro código que a su vez requiere que el contenido se procese para su procesamiento. Para resolver este dilema, debemos deshacernos de document.write () e implementarlo de la manera correcta.

c) Manipulación imposible

Una vez que está escrito, está hecho y terminado. No podemos volver a manipularlo sin aprovechar el DOM.

No creo que usar document.write sea una mala práctica en absoluto. En palabras simples, es como un alto voltaje para personas sin experiencia. Si lo usa de la manera incorrecta, se cocina. Hay muchos desarrolladores que han utilizado este y otros métodos peligrosos al menos una vez, y realmente nunca profundizan en sus fallas. En cambio, cuando algo sale mal, simplemente se rescatan y usan algo más seguro. Esos son los que hacen tales declaraciones sobre lo que se considera una "mala práctica".

Es como formatear un disco duro, cuando necesita eliminar solo unos pocos archivos y luego decir "formatear el disco es una mala práctica".

Creo que el mayor problema es que cualquier elemento escrito a través de document.write se agrega al final de los elementos de la página. Raramente es el efecto deseado con diseños de página modernos y AJAX. (debe tener en cuenta que los elementos en el DOM son temporales, y cuando se ejecuta el script puede afectar su comportamiento).

Es mucho mejor establecer un elemento de marcador de posición en la página y luego manipular su innerHTML.