为什么"new ()“会立即触发网络请求，而"createElement('script')”不会触发？
为什么"new ()“会立即触发网络请求，而"createElement('script')”不会触发？
提问于 2019-07-18 04:57:47
我使用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中，如果我不将脚本元素附加到主体，则不会触发任何网络请求。
为什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-18 05:46:14
我不确定这会有帮助，准备稿中的步骤24解释了script标记的src行为，用户代理(浏览器)必须遵循这样的行为：
由于性能原因，用户代理可能会在设置src属性后立即开始获取经典脚本或模块图(如上面所定义的)，相反，希望元素将被插入到文档中(同时，跨源属性不会更改值)。 无论哪种方式，一旦元素插入到文档中，加载就必须按照本步骤中的描述启动。如果UA执行这样的预取，但元素从未插入文档中，或者src属性动态更改，或者跨源属性被动态更改，则用户代理将不会执行如此获得的脚本，并且抓取过程将被有效地浪费掉。
这解释了图像资源需要加载的方式和时间，即使映像元素不在DOM中：
立即获取图像的用户代理必须同步更新img元素的图像数据，如果指定了重新启动动画标志，则必须同步更新该元素的图像数据，只要该元素被创建或经历相关的突变。 获取按需图像的用户代理必须随时更新img元素的图像数据(即按需图像数据)，但前提是img元素的当前请求状态不可用。当img元素经历了与相关的突变时，如果用户代理只按需获取图像，则img元素的当前请求状态必须返回为不可用。
再论img元素的DOM操作
img元素的相关突变如下：
- 元素的src、srcset、width或size属性被设置、更改或删除。
- 元素的src属性设置为与前一个值相同的值。这必须为更新图像数据算法设置重新启动动画标志。。
- 元素的
crossorigin属性的状态发生了更改。 - 元素插入到图片父元素或从图片父元素中删除。
- 该元素的父元素是一个图片元素，一个源元素作为先前的同级插入。
- 元素的父元素是一个图片元素，删除了以前同级元素的源元素。
- 元素的父元素是图片元素，源元素是以前的同级元素，它的
srcset、大小、媒体或类型属性设置、更改或删除。 - 元素采用的步骤是运行的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57087382
复制相关文章
相似问题
腾讯云开发者
