javascript - 当你用 JavaScript 改变 DOM 时，浏览器会获取新的资源吗？

Question

我的页面 HTML 正文中有以下内容:

   <aside id="ADVERT">
      <img src='https://www.blackstone.com/images/default-source/assets/logos/blackstone-logo.png'>
   </aside>

在页面的后面，有一个按钮，单击该按钮可以将图像与另一个图像切换。这是按钮代码:

   <button onclick="switchadvert();">Switch Logo</button>

这个 switchadvert Javascript 函数本身很简单，只有一行，使用innerHTML 属性:

   function switchadvert()
   { document.getElementById("ADVERT").innerHTML = "<img src='http://www.redstone.com/gfx/logo.png'>";
   }

这一切似乎都有效。当我单击该按钮时， Logo 从 Blackstone Group 的 Logo 更改为 Redstone 的 Logo 。

我的问题是它是如何工作的，为什么会起作用？

如何: 显然，一旦我用这个新的innerHTML更新DOM，浏览器就会意识到页面的这一部分需要它没有的资源(红石 Logo )并去获取它？页面加载后很长时间？

原因: 我认为即使我不厌其烦地对 XMLHttpRequest 对象进行 AJAX 调用，在页面加载后我也不允许从另一个站点获取资源。但这里它是在没有任何调用的情况下完成的!这不会为跨站点脚本滥用打开大门吗？

Answer 1

对于<img>问题，浏览器如何知道它必须获取新资源，这就是 what does the HTMLImageElement当它src时属性已设置。
何时发生这种情况并不重要，甚至不需要将元素附加到文档中；当您设置此 src 时，其获取算法将启动。

对于跨域问题，这与请求的时间无关。但要澄清另一个误解，跨域限制是为了避免脚本能够访问跨域数据，但您仍然可以很好地在页面中显示跨域数据。在这里，因为您没有设置 cross-origin您的<img>的属性，那么您将无法访问该图像的内容。