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

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. 图像是通过网络请求的，因此它将消耗带宽，这可能会减慢其他元素的加载时间，这完全取决于图像的大小。
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>