是否在内存块页面渲染/性能中创建图像

Question

在内存中发出图像请求会阻碍页面性能/渲染。

    myImage=new Image();
    myImage.src = "http://somesite.com/images/smallImage.gif?par1=val1&par2=val2";

smallImage.gif是1x1像素的透明gif。它仅用于将图像源查询字符串中的数据推送到服务器，在页面上没有其他用途。服务器响应的延迟是否会导致页面性能出现问题，因为它仅存在于内存中而不是html内容的一部分？

Answer 1

JavaScript图像对象与<img />标记相同。

1. 图像是通过网络请求的，因此它将消耗带宽，这会减慢其他元素的加载时间，这全都取决于图像的大小。当然，只有在页面未完全呈现时发生加载图像的JS代码时，才会发生这种情况。
2. javascript图像对象是异步加载的（图像onload事件处理程序称为异步），因此它不会阻止其他javascript代码的执行。
3. 浏览器首先呈现DOM，然后呈现媒体。因此，即使您的图片很大且加载缓慢，其余的DOM也会在之前显示。

如下面的代码片段所示，在图像加载完成之前，呈现img标签后的div。

<div>Hello </div>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Fronalpstock_big.jpg" style="width: 100%; height: auto; object-fit:contain;" />
<div>World !</div>