使用 XHR 请求加载图像

Loading images with XHR Request

本文关键字：图像 加载 请求 XHR 使用      更新时间：2023-09-26

我想创建一个图像进度条库，所以我在加载图像时需要一个事件来更新进度条(例如 onprogress (

假设我要加载所有图像并创建一个 XHR 请求以具有onprogress事件，所以我需要知道这些场景之间是否有任何区别：

第一：
1-使用XHR请求
加载图像2-附加img标签，指向图像网址(例如 <img src='boo.png' /> (

第二：
1-使用XHR请求
加载图像2- 在 XHR 响应的 base64 后附加一个 img 标签(例如 <img src='data:image/png;base64,==Ad3tr' /> (

编辑：姗姗来迟地意识到你不是在问IMG .vs. XHR图像加载，而是使用XHR的两种不同方法。 在下面保留我的原始答案，因为它包含有关IMG .vs. XHR差异的信息，这些信息可能仍然在这里引起人们的兴趣。

简而言之，在整体复杂性方面存在相当大的差异。 使用数据 url 将 XHR 数据放入 IMG 对象是一个不平凡的问题 - 请参阅此 SO 问题。 它依赖于可能不完全支持的新 API，并且存在多种性能影响：加载所需 JS 的页面加载时间增加、对响应数据进行编码所需的 CPU 周期以及垃圾回收所需的所有额外内存所需的额外时间。

我整理了一个jsperf测试来比较这两种方法，但请注意，数据URL测试是不完整的(！( - 它实际上并没有产生一个有效的URL，但它确实是utf8 + base64，所以它可能并不可怕。 但是，如果有的话，它比你最终得到的要快。

基本上我想不出使用数据 url 的任何优势，除了它避免了依赖浏览器缓存......但我希望这只不过是一个理论上的反对意见

使用基于 XHR 的图像加载，您正在处理...

  1. 对提取二进制(图像(数据的有限支持：XHR responseType 属性旨在允许这样做，但并非在所有浏览器上都可用。 因此，您需要在那里研究解决方法。
  2. 对 base64 编码的支持有限。 IE9-不支持atob，因此你必须依赖JS填充程序。 这将对 CPU 和垃圾回收产生性能影响，这可能与您有关，也可能不与您有关。
  3. 对提取跨域资源的支持有限。 XHR 请求必须是同源的，除非您实现对 CORS 的服务器支持。 而且，并非所有浏览器(IE9-，毫不奇怪(都完全支持CORS。
相关文章：