为何通过JS生成的<noscript>内<img>仍发起网络请求？

我通过JavaScript生成了嵌套在<noscript>标签内的<img>标签，原本预期仅在禁用JavaScript时才会发起该图片的网络请求，但实际却出现了两次网络请求（原本仅预期一次）。我对这一机制存在哪些误解？

相关代码片段 #

HTML代码

<p>The 20x20 should always make a network request
<img src="https://placehold.co/20" alt=""></p>

<p>The JS added 1x1 shouldn't make any network request</p>

JavaScript代码

const noScriptEl = document.createElement("noscript");
const imgEl = document.createElement("img");
imgEl.src = "https://placehold.co/1";
document.body.appendChild(noScriptEl).appendChild(imgEl);

你对<noscript>的作用机制和JS操作DOM的行为存在两个核心误解：

1. 误解动态创建的<noscript>的行为 #

<noscript>的特殊屏蔽逻辑只针对页面初始HTML中自带的标签：当浏览器加载页面时，如果检测到JS启用，会直接跳过初始HTML里<noscript>内部的所有内容，不会解析、渲染，也不会加载其中的资源。

但通过JavaScript动态创建的<noscript>元素，在JS启用的环境下完全等同于普通的容器标签（比如<div>），浏览器会正常解析其内部的所有元素，包括触发<img>的资源请求。

2. 误解<noscript>能阻止JS主动触发的资源请求 #

当你通过JS创建<img>并直接设置src属性时，不管这个元素有没有被添加到DOM，甚至不管它是否在<noscript>里，浏览器都会立刻发起网络请求——这是JS操作DOM元素的固有行为：只要通过JS为<img>的src赋值，就会触发资源加载，和元素所在的容器没有关系。

两次请求的具体原因 #

1. 第一次请求：执行imgEl.src = "https://placehold.co/1"时，JS主动为<img>设置了地址，浏览器直接发起请求；
2. 第二次请求：把<img>添加到动态创建的<noscript>并挂载到DOM后，由于这个<noscript>是JS生成的，浏览器将其视为普通容器，解析内部的<img>时再次触发了资源请求。

正确实现“仅JS禁用时加载图片”的方式 #

如果要实现预期效果，不能通过JS动态创建<noscript>和<img>，而是要在初始HTML中直接编写<noscript>标签：

<noscript>
  <img src="https://placehold.co/1" alt="" />
</noscript>

这样当JS启用时，浏览器会忽略该<noscript>内部的内容，不会发起请求；只有当JS禁用时，才会加载这张图片。

内容的提问来源于stack exchange，提问作者skube