Javascript 为什么document.write被认为是一个；坏习惯；？

我知道这被认为是坏习惯；我希望能编一份原因清单，提交给第三方供应商，说明他们为什么不应该使用

document.write

来实现他们的分析代码

---

请说明您申请

文档的原因。请将
作为一种不好的做法写在下面。
实际上
文档没有什么问题。写
，就其本身而言。问题是它很容易被滥用。甚至很糟糕

对于提供分析代码（如Google analytics）的供应商而言，这实际上是他们分发此类代码片段的最简单方式

它使脚本保持小型化
他们不必担心重写已经建立的onload事件，也不必包括安全添加onload事件所需的抽象
它非常兼容
只要你不在文档加载后尝试使用它，
文档。在我看来，写
并不是天生的邪恶。
它会覆盖页面上的内容，这是最明显的原因，但我不会称之为“坏”

除非您使用JavaScript创建整个文档，否则它没有多大用处。在这种情况下，您可以从document.write开始

即便如此，当您使用document.write时，您并没有真正利用DOM——您只是将一团文本转储到文档中，因此我认为这是一种糟糕的格式。
我认为最大的问题是，通过document.write编写的任何元素都会添加到页面元素的末尾。对于现代页面布局和AJAX来说，这很少是理想的效果。（您必须记住DOM中的元素是暂时的，脚本运行的时间可能会影响其行为）

最好在页面上设置一个占位符元素，然后操纵它的innerHTML。

document.write需要在页面加载或正文加载中使用。因此，如果您想在任何其他时间使用该脚本来更新页面内容文档，那么write几乎毫无用处

从技术上讲，
document.write
只会更新HTML页面，而不会更新XHTML/XML。IE似乎很宽容这个事实，但其他浏览器不会

一些更严重的问题：


document.write（此后为DW）在XHTML中不起作用

DW不会直接修改DOM，从而阻止进一步的操作（试图找到这方面的证据，但最好是根据情况）

页面加载完成后执行的DW将覆盖页面，或写入新页面，或无法工作

DW在遇到的地方执行：它不能在给定的节点点注入

DW正在有效地编写序列化文本，这不是DOM概念上的工作方式，而且是创建bug的一种简单方法（.innerHTML也有同样的问题）


使用安全且对DOM友好的
更好，它使用XML呈现（如XHTML页面）来断开页面

最佳：一些浏览器切换回HTML呈现，一切正常

可能：某些浏览器在XML呈现模式下禁用document.write（）函数

最糟糕的：某些浏览器在使用document.write（）函数时会触发XML错误。
Pro:


这是从外部（主机/域）脚本嵌入内联内容的最简单方法
您可以覆盖框架/iframe中的整个内容。在更现代的Ajax技术被广泛使用之前（1998-2002），我经常在菜单/导航部分使用这种技术

Con:


它序列化渲染引擎以暂停，直到加载所述外部脚本，这可能需要比内部脚本更长的时间
它的使用方式通常是将脚本放在内容中，这被认为是糟糕的形式
这是我的两便士，一般来说，你不应该使用
文档。写
是为了负重，但有一个例子肯定有用：


我最近在尝试创建AJAX滑块库时发现了这一点。我创建了两个嵌套div，并使用JS将
宽度
/
高度
和
溢出：隐藏
应用到外部
。这是为了在浏览器禁用JS的情况下，div将浮动以容纳库中的图像-这是一种非常优雅的降级

问题是，正如上面的文章一样，这个JS劫持CSS的行为直到页面加载后才开始，在加载div时引起了瞬间的闪烁。因此，我需要编写一个CSS规则，或者在加载页面时包含一个工作表

显然，这在XHTML中不起作用，但由于XHTML看起来像是一只死鸭子（在IE中呈现为标记汤），因此可能需要重新评估您对DOCTYPE的选择…
它可能会阻塞您的页面

document.write
仅在加载页面时有效；如果在页面加载完成后调用它，它将覆盖整个页面

这实际上意味着您必须从内联脚本块调用它，这将阻止浏览器处理后面的部分页面。在编写块完成之前，脚本和图像不会被下载。
另一个合法使用
文档的方法。write
来自HTML5样板示例


window.jQuery | | document.write（“”）

我还看到了使用JSON解析/stringify polyfill（）的相同技术

window.JSON | | document.write（“”）
可以将document.write（）（和.innerHTML）看作是对源代码字符串的求值。这对于许多应用程序来说非常方便。例如，如果您从某个源代码中以字符串的形式获取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>

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

(cons 'orange '())

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

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