2

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

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

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

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

4

1 回答 1

2

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

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

我整理了一个jsperf 测试来比较这两种方法，但请注意 data-url 测试是不完整的（！） - 它实际上不会产生有效的 URL，但它会产生 utf8 + base64，因此比较可能并不可怕. 但是，如果有的话，它比你最终得到的要快。

基本上我想不出使用 data-url 有什么好处，除了它避免了不得不依赖浏览器缓存......但我希望这只不过是一个理论上的反对意见

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

  1. 对获取二进制（图像）数据的有限支持：XHRresponseType属性旨在允许这样做，但并非在所有浏览器上都可用。因此，您需要在那里研究解决方法。
  2. 对 base64 编码的有限支持。IE9- 不支持atob，因此您必须依赖 JS shim。这将对 CPU 和垃圾收集产生性能影响，这可能会或可能不会关注您
  3. 对获取跨域资源的有限支持。除非您实现对CORS的服务器支持，否则 XHR 请求必须是同源的。而且，并非所有浏览器（IE9-，毫不奇怪）都完全支持 CORS。
于 2013-10-02T00:22:21.380 回答