为什么document.write被认为是“不良做法”?

2020/09/30 05:41 · javascript ·  · 0评论

我知道这document.write被认为是不良做法;并且,我希望整理出一份为什么要向第三方供应商提交的原因清单,说明为什么他们不应该document.write在其分析代码的实现中使用它们。

document.write在下面列出您声称是不良做法的原因

一些较严重的问题:

  • document.write(此后称为DW)在XHTML中不起作用

  • DW不会直接修改DOM,从而阻止了进一步的操作 (试图寻找证据,但充其量只是视情况而定)

  • 页面加载完成后执行的DW将覆盖页面,或写入新页面,或不起作用

  • DW在遇到的地方执行:它无法在给定的节点上注入

  • DW有效地编写了序列化的文本,这不是DOM在概念上的工作方式,并且是创建错误的简便方法(.innerHTML存在相同的问题)

使用安全且对DOM友好的DOM操作方法要好得多

实际上document.write,本质上没有任何问题问题在于滥用它真的很容易。总的来说,甚至。

对于供应商提供分析代码(例如Google Analytics(分析))而言,这实际上是他们分发此类代码段的最简单方法

  1. 它使脚本较小
  2. 他们不必担心会覆盖已经建立的onload事件或包括必要的抽象以安全地添加onload事件
  3. 高度兼容

根据document.write我的拙见,只要您在文档加载后不尝试使用它就不是天生的邪恶。

的另一合法用途document.write来自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>

我也看到了使用json2.js JSON解析/字符串化polyfill的相同技术IE7及以下版本需要)。

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

它可以阻止您的页面

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

这实际上意味着您必须从一个内联脚本块中调用它-这将阻止浏览器处理随后的页面部分。在编写块完成之前,不会下载脚本和图像。

优点:

  • 这是从外部(到主机/域)脚本中嵌入内联内容的最简单方法。
  • 您可以覆盖框架/ iframe中的全部内容。在更现代的Ajax技术广泛使用之前(1998年至2002年),我曾经在菜单/导航部分中经常使用此技术。

缺点:

  • 它序列化渲染引擎以暂停,直到加载所述外部脚本为止,这可能比内部脚本花费更长的时间。
  • 通常以将脚本放置在内容中的方式使用,这被认为是错误的形式。

这是我的两便士,一般来说,您不应该将其document.write用于繁重的工作,但是在某些情况下,它绝对有用:

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

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

就像上面的文章一样,这种CSS的JS劫持直到页面加载完成后才开始,导致div加载时出现瞬时闪烁。因此,我需要在加载页面时编写CSS规则或包含一张工作表。

显然,这在XHTML中不起作用,但是由于XHTML看起来像是一堆死鸭(并且在IE中显示为标记汤),因此可能值得重新评估您对DOCTYPE的选择...

它会覆盖页面上的内容,这是最明显的原因,但我不会称其为“不好”。

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

即使这样,当您使用document.write时,您并没有真正利用DOM -您只是将一小段文本转储到文档中,所以我认为这是一种不好的形式。

它使用XML渲染破坏页面(例如XHTML页面)。

最好:一些浏览器切换回HTML呈现,并且一切正常。

可能:某些浏览器在XML呈现模式下禁用document.write()函数。

最糟糕的是:每当使用document.write()函数时,某些浏览器都会触发XML错误。

从我的头顶上:

  1. document.write需要在页面加载或正文加载中使用。因此,如果您想在其他时间使用脚本来更新页面内容document.write几乎没有用。

  2. 从技术上讲,document.write只会更新HTML页面,而不会更新XHTML / XML。IE似乎可以宽恕这个事实,但其他浏览器却不会。

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

document.write在某些情况下,Chrome可能会阻止插入脚本。发生这种情况时,它将在控制台中显示以下警告:

通过document.write调用Parser阻止,跨域脚本...。如果设备的网络连接较差,浏览器可能会阻止此操作。

参考文献:

违反浏览器

.write被视为违反浏览器,因为它会停止解析器渲染页面。解析器收到该文档正在被修改的消息;因此,它会被阻塞,直到JS完成其过程为止。仅在此时,解析器才能恢复。

性能

采用这种方法的最大结果是性能降低。浏览器将花费更长的时间来加载页面内容。对加载时间的不利反应取决于要写入文档的内容。如果您向<p>DOM添加标签,而不是将对JavaScript库的50多个引用传递给数组,则不会有太大区别(我在工作代码中已经看到这种情况,导致11秒钟的延迟)当然,这也取决于您的硬件)。

总而言之,如果可以帮助,最好避免使用此方法。

有关更多信息,请参见干预document.write()

根据Google-Chrome开发人员工具的Lighthouse Audit所做的分析

对于连接速度较慢的用户,通过动态注入的外部脚本document.write()可能会使页面加载延迟数十秒。

在此处输入图片说明

  • document.write不良做法的一个简单原因是,您无法提出无法找到更好替代方案的方案。
  • 另一个原因是您正在处理字符串而不是对象(这是非常原始的)。
  • 它仅附加到文档。
  • 它没有MVC(模型-视图-控制器)模式的任何优点。
  • 使用ajax + jQueryangularJS呈现动态内容的功能要强大得多

可以将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/

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

a)实施

document.write()主要用于在需要内容后立即将其写入屏幕。这意味着它发生在任何地方,无论是在JavaScript文件中还是在HTML文件中的脚本标签中。将script标记放置在此类HTML文件中的任何位置,在文档块中将document.write()语句与网页中的HTML交织在一起是一个不好的主意。

b)渲染

通常,设计良好的代码将采用任何动态生成的内容,将其存储在内存中,并在其最终通过屏幕显示出来之前,对其进行操作。因此,要重申上一节中的最后一点,就地渲染内容可能比可能依赖的其他内容渲染速度更快,但其他代码可能无法使用它反过来又需要渲染内容进行处理。为了解决这个难题,我们需要摆脱document.write()并以正确的方式实现它。

c)不可能的操纵

一旦写完,就结束了。如果不使用DOM,我们将无法回过头来对其进行操作。

我认为使用document.write根本不是一个坏习惯。简单来说,这对没有经验的人来说就像是高压。如果使用错误的方法,则会煮熟。有许多开发人员至少使用过一次此方法和其他危险方法,他们从未真正挖掘过自己的失败。相反,当出现问题时,他们会纾困,并使用更安全的东西。这些人就所谓的“不良做法”发表此类声明。

这就像格式化硬盘驱动器一样,当您只需要删除几个文件然后说“格式化驱动器是一个坏习惯”时。

我认为最大的问题是,任何通过document.write编写的元素都被添加到页面元素的末尾。对于现代页面布局和AJAX来说,这几乎不是理想的效果。(您必须记住,DOM中的元素是临时的,脚本运行时可能会影响其行为)。

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

本文地址:http://javascript.askforanswer.com/weishenmedocument-writebeirenweishibuliangzuofa.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!