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);

在 case1 和 case2 中，将立即触发网络请求。

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

为什么？

Answer 1

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

出于性能方面的考虑，用户代理可能会开始获取经典版本   src属性后立即执行脚本或模块图（如上定义）   而是设置为希望将元素插入到   文档（并且跨域属性不会更改   同时）。

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

This解释了即使图像元素不在DOM中，如何以及何时需要加载图像资源：

立即获取图像的用户代理必须同步更新   设置了重新启动动画标志的img元素的图像数据   如果有说明，则无论何时创建或经历了该元素   相关突变。

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

进一步img元素的DOM manipulation：

img元素的相关突变如下：



已设置，更改或删除了元素的src，srcset，width或size属性。



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



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



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



元素的父元素是图片元素，并且将源元素作为前一个兄弟元素插入。



元素的父元素是图片元素，而先前的兄弟元素的源元素被删除。



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



该元素的采用步骤已运行。

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

1 个答案: