使用XHR请求加载图像

Question

我想创建一个图片进度条库，这样我在加载图片时需要一个事件来更新进度条（例如onprogress）

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

首先
1-使用XHR请求加载图像
2-附加img标记，指向图片网址（例如<img src='boo.png' />）

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

Answer 1

编辑：姗姗来迟地意识到你没有问过IMG .vs。 XHR图像加载，而是使用XHR的两种不同方法。保留我原来的答案，因为它有关于IMG .vs的信息。 XHR的差异可能仍然是人们感兴趣的。

简而言之，总体复杂性方面存在很大差异。使用data-url将XHR数据放入IMG对象是一个非常重要的问题 - 请参阅this SO question。它依赖于可能不完全支持的新API，并且存在一些性能影响：加载所需JS的页面加载时间增加，编码响应数据所需的CPU周期以及垃圾收集所需的额外内存所需的额外时间

我把一个jsperf test to compare the two approaches放在一起，但请注意data-url测试不完整（！） - 它实际上并没有产生有效的URL，但它确实是utf8 + base64所以它可能并不可怕比较。但是，如果有的话，它会比你最终得到的更快。

基本上我不能想到使用数据网址有什么好处，除了它避免不得不依赖浏览器缓存......但我希望这只是理论上的反对意见

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

1. 对获取二进制（图像）数据的有限支持：XHR responseType属性旨在允许此操作，但并非在所有浏览器上都可用。因此，您需要在那里查看workarounds。
2. 对base64编码的有限支持。 IE9-不支持atob，因此你必须依赖JS shim。这将对CPU和垃圾收集产生性能影响，这可能与您有关，也可能与您没关系
3. 获取跨域资源的支持有限。除非您为CORS实施服务器支持，否则XHR请求必须是同源的。而且，并非所有浏览器（IE9-，毫不奇怪）都完全支持CORS。