javascript - 在内存中创建的图像会阻碍页面渲染/性能吗

标签 javascript image dom

内存中发出的图像请求是否会妨碍页面性能/渲染。

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

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

最佳答案

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>

关于javascript - 在内存中创建的图像会阻碍页面渲染/性能吗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59034689/

相关文章:

javascript - 如何使用 browserify 运行节点加密模块

javascript - 第 n 个子级之前/之后的 body.innerHTML

javascript - 使用 jquery、css 创建自定义确认框

ios - 如何在 Swift 3 中居中和纵横比适合图像?

c# - 如何获取显示图像的 (x, y) 坐标?

html - 响应式图像大小调整,列表项中的文本垂直居中

PHP 尝试使用 getElementsByTagName 获取非对象的属性

javascript - 如何使用 jQuery 克隆没有数据但只有结构的 <tr> 元素?

javascript - 多个fs.write追加到同一个文件能保证执行顺序吗?

javascript - jQuery $.each 与 JavaScript .forEach