在Chrome中获得大型AJAX响应而不会崩溃

Question

我正在研究一个针对Chrome浏览器的项目。我们要完成的目标是将一百万个记录数组放入浏览器中以处理数据。当我生成一个包含一百万条记录的测试文件时，它超过了1 GB。

出于我将要解释的原因，我相信只要能够在必要时让浏览器收集垃圾，我们就能实现目标。我认为浏览器不需要时会保留AJAX响应的文本，因此会崩溃。

现在，我可以在浏览器中生成一百万条记录，并根据需要对其进行操作。但是，我无法将AJAX发送到浏览器而不崩溃。

由于发送了100万次崩溃，我尝试发送了十万次。我可以得到两个这样的批次并解析JSON。如果我的AJAX通话没有onreadystatechange，则可以进行多次通话。另外，如果我收到十万条记录，则可以遍历十遍，并制作完整的阵列。

因为我似乎实际上可以保存一百万条记录，所以我相信，正如我所说，保存响应文本使浏览器不堪重负。

为了尝试获得更好的内存管理，我将AJAX请求推送并解析为Web worker。当网络工作者获取AJAX并制作了十万条记录数组时，它将其推入DOM线程。当DOM线程获取数据时，它让Web工作者执行另一个AJAX。

但是，它仍然崩溃。

我愿意使用websockets或其他方式，如果有帮助的话。

这是DOM线程中的代码：

var iterations=3;
var url='hunthou.json';      
var worker=new Worker('src/worker.js');
var count=0;
    worker.addEventListener('message',function(e){
      alert('count: '+count);
      //bigArr=bigArr.concat(e.data);
      console.log('e.data length: '+e.data.length);
      bigArr[count]=e.data;
      console.log('bigArr length: '+bigArr.length);
      if(count<(iterations-1)){
        worker.postMessage(url);  
      } else{
        alert('done');
        console.log('done');
        worker.terminate();
        console.log('bye');
      }
      count++;
    });
worker.postMessage(url);

这里是网络工作者：

var arr=[];
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
    var DONE = this.DONE || 4;
    if (this.readyState === DONE){          
        arr=JSON.parse(request.responseText);
        self.postMessage(arr);          
        arr.length=0;
        request.responseText.length=0;
        console.log('okay');
    }
};

self.addEventListener('message', function(e) {
    var url=e.data;
    console.log('url: '+url);

    request.open("GET",'../'+url,true);
    request.send(null);
}, false);

Answer 1

而不是一次发送全部数据。

您可以创建多个请求，这些请求将检索数据块，而不是立即检索整个数据，这将防止浏览器崩溃。