为什么“ new Image（）”立即触发网络请求，而“ createElement（'script'）”却没有触发？

Question

我new Image()用来创建一个新的图像元素。当我设置“ src”属性时，将立即触发网络请求。为什么？是否有任何说明文档？

以下情况：

情况1：

var img = new Image();
img.src = 'http://someurl.png';

情况2：

var imgStr = '<img src="http://someurl.png">';
var div = document.createElement('div');
div.innerHTML = imgStr;

情况3：

var script = document.createElement('script');
script.src = 'http://someurl.js';
// document.body.appendChild(script);

在情况1和情况2，网络请求将触发一次。

在case3中，如果我不将script元素附加到主体，则不会触发任何网络请求。

为什么？

Answer 1

我不确定这是否有帮助，在准备脚本的步骤24中，解释了script标签的src行为，用户代理（浏览器）必须遵循该行为：

出于性能方面的考虑，用户代理可能会在设置src属性后立即开始获取经典脚本或模块图（如上定义），而是希望将元素插入文档中（以及跨域）属性不会在此期间更改值）。

无论哪种方式，一旦将元素插入文档，就必须按照该步骤所述开始加载。如果UA执行了这样的预取操作，但是从未将元素插入文档中或动态更改了src属性或动态更改了跨域属性，则用户代理将不会执行如此获得的脚本，并且获取过程将具有被有效地浪费了。

这说明了即使图像元素不在DOM中，也需要如何以及何时加载图像资源：

立即获得图像的用户代理必须同步创建img元素的图像数据，并在设置了重新启动动画标志后更新img元素，只要该元素被创建或经历了相关的突变。

按需获取图像的用户代理必须在需要图像数据时（即按需）更新img元素的图像数据，但前提是img元素的当前请求状态不可用。 当img元素经历了相关的突变时，如果用户代理仅按需获取图像，则img元素的当前请求状态必须返回为不可用。

进一步讨论img元素的DOM操作：

img元素的相关突变如下：

• 设置，更改或删除元素的src，srcset，width或sizes属性。

• 元素的src属性设置为与先前值相同的值。这必须设置重新启动动画标志以更新图像数据算法。

• 元素的crossorigin属性状态已更改。

• 该元素将插入图片父元素或从中删除。

• 元素的父元素是图片元素，而源元素作为前一个同级插入。

• 元素的父元素是图片元素，并且删除了以前的兄弟元素的源元素。

• 元素的父元素是图片元素，而前一个兄弟元素的源元素具有srcset，大小，媒体或类型属性被设置，更改或删除。

• 运行元素的采用步骤。