为何document.write被视为“不良作法”？

我知道document.write被认为是不良作法； 而且，我但愿整理出一份为何要向第三方供应商提交的理由清单，说明他们为何不该该在其分析代码的实现中使用document.write 。

请在下面document.write您主张document.write的不良作法。

---

#1楼

能够将document.write（）（和.innerHTML）视为评估源代码字符串。 对于许多应用程序来讲，这可能很是方便。 例如，若是您从某个来源得到HTML代码做为字符串，则只需“评估”它就很方便。

在Lisp的上下文中，DOM操做就像操做列表结构，例如，经过执行如下操做建立列表（橙色）：

(cons 'orange '())

而document.write（）就像评估字符串同样，例如，经过评估以下的源代码字符串来建立列表：

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

Lisp还具备使用列表操做建立代码的很是有用的功能（例如使用“ DOM样式”建立JS解析树）。 这意味着您可使用“ DOM样式”而不是“字符串样式”创建列表结构，而后运行该代码，例如：

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

若是您实现像简单的实时编辑器这样的编码工具，则具备快速评估字符串的能力很是方便，例如使用document.write（）或.innerHTML。 从这个意义上讲，Lisp是理想的选择，可是您也能够在JS中完成很是酷的工做，并且不少人都在这样作，例如http://jsbin.com/

---

#2楼

这是个人两便士，通常来讲，您不该该使用document.write进行繁重的工做，可是在某些状况下，它绝对有用：

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

我最近发现这个尝试建立AJAX滑块库。 我建立了两个嵌套的div，并应用了width / height和overflow: hidden使用JS overflow: hidden到外部的<div> 。 这样一来，若是浏览器禁用了JS，则div会浮动以容纳图库中的图像-一些不错的优雅降级。

就像上面的文章同样，这种CSS的JS劫持直到页面加载完成后才开始，致使div加载时出现瞬时闪烁。 所以，我须要在加载页面时编写CSS规则或包含一张工做表。

显然，这在XHTML中是行不通的，可是因为XHTML看起来像是死鸡了（而且在IE中显示为标签汤），所以可能值得从新评估您对DOCTYPE的选择...

---

#3楼

• 为何document.write很差的一个简单缘由是，您没法提出没法找到更好替代方案的方案。
• 另外一个缘由是您正在处理字符串而不是对象（这是很是原始的）。
• 它仅附加到文档。
• 它没有MVC（模型-视图-控制器）模式的任何优势。
• 使用ajax + jQuery或angularJS呈现动态内容的功能要强大得多 。

---

#4楼

document.write的缺点主要取决于如下三个因素：

a）实施

document.write（）一般用于在须要内容时将内容写入屏幕。 这意味着它发生在任何地方，不管是在JavaScript文件中仍是在HTML文件中的脚本标签内。 将script标记放置在此类HTML文件中的任何位置，在文档块中将document.write（）语句与网页中的HTML交织在一块儿是一个很差的主意。

b）渲染

一般，设计良好的代码将采用任何动态生成的内容，将其存储在内存中，并在其最终经过屏幕显示出来以前，对其进行操做。 所以，为了重申上一节中的最后一点，就地渲染内容可能比可能依赖的其余内容渲染速度更快，可是其余代码可能没法使用它反过来又须要渲染内容进行处理。 为了解决这个难题，咱们须要摆脱document.write（）并以正确的方式实现它。

c）不可能的操纵

一旦写完，就结束了。 若是不使用DOM，咱们将没法回过头来对其进行操做。

---

#5楼

Chrome可能会阻止在某些状况下插入脚本的document.write 。 发生这种状况时，它将在控制台中显示如下警告：

经过document.write调用Parser阻止，跨域脚本...。 若是设备的网络链接较差，浏览器可能会阻止此操做。

参考文献：

• 有关developers.google.com的这篇文章会更详细。
• https://www.chromestatus.com/feature/5718547946799104