我有一个“类似JSFiddle”的演示,演示如何使用XHR2在一个紧密的循环中获取PNG(二进制blob)。第一个演示抓取341个PNG图像,然后将它们保存在IndexedDB中(使用PouchDB)。
这个演示很好:http://codepen.io/DrYSG/pen/hpqoD
(要操作,请先按[删除数据库],重新加载页面,等待状态=就绪(您应该看到它计划获取341个磁贴),然后按[下载磁贴]。)
下一个演示是相同的代码(相同的JS、CSS、HTML),但它试图获得6163png文件(同样来自Google Drive)。这次您将在控制台日志中看到许多XHR 0错误。
http://codepen.io/DrYSG/pen/qCGxi
它使用的算法如下:
测试是否存在XHR2、IndexedDB和Chrome(它们没有二进制blob,而是Base64)。并显示此状态信息
从GoogleDrive获取PNG tiles的JSON清单(我有171个PNG tiles,每个大小为256x256)。清单列出了它们的名称和大小。
将JSON清单存储在DB中
MVVM和UI控件来自KendoUI(这次我没有使用它们出色的网格控件,因为我想探索CSS3网格样式)。
我每晚都在使用PouchDB
所有的文件PNG文件是从谷歌驱动器(NASA蓝色大理石)fetech。
我用Safe FME 2013 Desktop创建了平铺金字塔。
我的猜测是,所有这些XHR2请求都是异步触发的,被放置在一个与JavaScript线程分离的线程上,然后当有太多的挂起请求时,Chrome就会生病。
FireFox没有这个问题,IE10也没有。
您可以分叉代码,并为第10行尝试不同的值:(要提取的最大平铺数)。
我已经向Chromium Bugs提交了一个bug,但是有没有人有过限制异步XHR2获取的经验,以便将大量数据下载到Chrome浏览器?
最佳答案
chromium的人承认这是他们应该解决的问题:https://code.google.com/p/chromium/issues/detail?id=244910,但同时我已经使用jquery defer/resolve实现了限制,以保持线程数较低。
更新:我将删除我的代码笔,因为我不再需要显示此错误。
关于html5 - Chrome阻塞了太多XHR2请求,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16819676/