内存中发出的图像请求是否会妨碍页面性能/渲染。
myImage=new Image();
myImage.src = "http://somesite.com/images/smallImage.gif?par1=val1&par2=val2";
smallImage.gif 是一个 1x1 像素的透明 gif。它仅用于将图像源查询字符串中的数据推送到服务器,在页面上没有其他用途。服务器响应延迟是否会导致页面性能问题,因为它只存在于内存中而不是 html 内容的一部分?
最佳答案
Javascript 图像对象与 <img />
相同标签。
- 图像是通过网络请求的,因此它会消耗带宽,从而减慢其他元素的加载时间,这完全取决于图像的大小。当然,只有在页面未完全渲染时加载图像的 JS 代码才会发生这种情况。
- JavaScript 图像对象异步加载(图像
onload
事件处理程序称为异步),因此它不会阻止其余 JavaScript 代码的执行。 - 浏览器首先渲染 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>
关于javascript - 在内存中创建的图像会阻碍页面渲染/性能吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59034689/