Pourquoi document.write est-il considéré comme une "mauvaise pratique" ?

Question

Je sais que document.write est considéré comme une mauvaise pratique ; et j'espère compiler une liste de raisons à soumettre à un vendeur tiers pour expliquer pourquoi il ne devrait pas utiliser le système document.write dans la mise en œuvre de leur code d'analyse.

Veuillez indiquer la raison de votre demande document.write comme une mauvaise pratique ci-dessous.

Answer 1

Quelques-uns des problèmes les plus graves :

• document.write (ci-après DW) ne fonctionne pas en XHTML

• DW ne modifie pas directement le DOM, ce qui empêche toute manipulation ultérieure. (j'essaie de trouver des preuves de cette affirmation, mais elles sont au mieux situationnelles)

• DW exécuté après la fin du chargement de la page écrasera la page, écrira une nouvelle page ou ne fonctionnera pas.

• La DW s'exécute là où elle est rencontrée : elle ne peut pas injecter à un point nodal donné.

• DW écrit effectivement du texte sérialisé, ce qui n'est pas la façon dont le DOM fonctionne conceptuellement, et c'est un moyen facile de créer des bogues (.innerHTML a le même problème).

Il est de loin préférable d'utiliser le système sûr et respectueux des DOM Méthodes de manipulation du DOM

Answer 2

En fait, il n'y a rien de mal à document.write en tant que tel. Le problème est qu'il est très facile de l'utiliser à mauvais escient. Grossièrement, même.

En ce qui concerne les fournisseurs de code d'analyse (comme Google Analytics), c'est en fait la manière la plus facile pour eux de distribuer de tels extraits.

1. Les scripts sont ainsi réduits.
2. Ils n'ont pas à se préoccuper de surcharger des événements onload déjà établis ou d'inclure l'abstraction nécessaire pour ajouter des événements onload en toute sécurité.
3. Il est extrêmement compatible

Tant que vous n'essayez pas de l'utiliser après le chargement du document , document.write n'est pas intrinsèquement mauvais, à mon humble avis.

Answer 3

Il peut bloquer votre page

document.write ne fonctionne que pendant le chargement de la page ; si vous l'appelez après le chargement de la page, elle écrasera toute la page.

Cela signifie que vous devez l'appeler à partir d'un bloc script en ligne - ce qui empêchera le navigateur de traiter les parties de la page qui suivent. Les script et les images ne seront pas téléchargés tant que le bloc d'écriture ne sera pas terminé.

Answer 4

Une autre utilisation légitime de l document.write provient du HTML5 Boilerplate index.html exemple.

<!-- 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>

J'ai également vu la même technique pour l'utilisation de la fonction json2.js Polyfill JSON parse/stringify ( nécessaire pour IE7 et les versions inférieures ).

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

Answer 5

Pro :

• C'est le moyen le plus simple d'intégrer du contenu en ligne provenant d'un script externe (à votre hôte/domaine).
• Vous pouvez écraser tout le contenu d'un cadre/iframe. J'utilisais beaucoup cette technique pour les éléments de menu/navigation avant que les techniques Ajax plus modernes ne soient largement disponibles (1998-2002).

Con :

• Il sérialise le moteur de rendu pour le mettre en pause jusqu'à ce que le script externe soit chargé, ce qui peut prendre beaucoup plus de temps qu'un script interne.
• Il est généralement utilisé de telle sorte que le script est placé dans le contenu, ce qui est considéré comme une mauvaise forme.