为什么“new Image()”会立即触发网络请求而“createElement('script')”不会？答案

【问题标题】：Why does "new Image()" trigger a network request at once but "createElement('script')" does not?为什么“new Image()”会立即触发网络请求而“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中，如果我不将脚本元素附加到正文中，则不会触发任何网络请求。

为什么？

【问题讨论】：

标签： javascript html

【解决方案1】：

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

出于性能原因，用户代理可能会开始获取经典脚本或模块图（如上定义）只要 src 属性被设置，相反，希望元素将被插入文档（并且跨域属性不会更改同时）。

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

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

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

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

进一步了解img 元素的DOM manipulation：

一个img元素的相关突变如下：

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

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

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

元素被插入或从图片父元素中移除。

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

元素的父元素是图片元素，并且删除了之前的同级元素。

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

运行元素的采用步骤。

【讨论】：