`new Image()`和`document.createElement('img')`之间有区别吗？

Question

在javascript中,我可以这样做:

img1 = new Image();
img2 = document.createElement('img');

我的问题是,这两种方法有区别吗？我读过某处Image,Form和Element被称为主机对象,这是真的吗？如果是,主机对象是什么？

哪种方法更可取？

Answer 1

我找不到任何详细的参考,但基于MDC中HTMLImageElement的注释-例如,它似乎Image是DOM级别0 document.createElement的一部分,而是DOM级别2的一部分.

DOM级别0由Netscape发明,提供了访问网站某些元素的方法.基本上所有浏览器都支持它以实现向后兼容性.
但说实话,我不明白为什么在Image构造函数中存在那里,因为,据我的理解是,有没有办法来处理与DOM级别0也许它只是通过浏览器内部使用,用于创建文档对象.

DOM级别2是W3C开发的官方标准.

有关DOM级别的更多信息,请查看quirksmode.org - Level 0 DOM和Wikipedia.

我读过某处Image,Form和Element被称为主机对象,这是真的吗？

是.

如果是,主机对象是什么？

在ECMAScript规范激励主机对象是这样的:

ECMAScript是一种面向对象的编程语言,用于在主机环境中执行计算和操作计算对象.这里定义的ECMAScript不是计算上自给自足的; 实际上,本说明书中没有规定输入外部数据或输出计算结果.相反,预计ECMAScript程序的计算环境不仅将提供本规范中描述的对象和其他设施,还将提供某些特定于环境的主机对象,其描述和行为超出了本规范的范围,除非指示它们可以提供可以访问的某些属性以及可以从ECMAScript程序调用的某些功能.

和

主机
环境提供的宿主对象对象,以完成ECMAScript的执行环境.
注意任何非本机对象都是宿主对象.

因此,规范中未定义并由环境提供的任何对象都是宿主对象.这些例如在(等等)浏览器:window,document和console.

Answer 2

这两行是等效的,都创建HTMLImageElement对象.唯一的区别在于具有混合命名空间的XML文档 - new Image()始终返回<img>带有XHTML命名空间的元素,document.createElement('img')并不总是这样做.

Answer 3

要求：

在我的团队中，我们正在构建角度5应用程序。功能要求是在组件加载时预加载图像，以便在需要时在我们的单页应用程序中的特定位置重用它们而无需再次加载。

1. img = new Image（）; 道路：

我们尝试通过预先在DOM中预加载图像，create new Image() 但是当我们重新使用图像src URL时，浏览器总是重新加载源文件或检查标头是否被修改（如果启用了缓存），这意味着预加载成功，但是对于每次重用，服务器的往返行程都是再做一次。

2. img = document.createElement（'img'）方式：

当我们document.createElement('img') 对图像源执行相同操作时，未重新加载图像源，而是从文档的本地内存重新使用了图像源，并且未对img src URL 进行任何额外的请求。

我真的不明白为什么，但这是我们发现的主要区别。万一其他人需要重用预加载的图像，则稍后将是节省一些带宽和少量请求往返的方法：)