javascript - 在 Chrome 中获取大型 AJAX 响应而不会崩溃

Question

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

出于我将解释的原因，我相信如果可以让浏览器在必要时收集垃圾，我们就可以实现目标。我相信浏览器在不需要时会保存 AJAX 响应的文本，并因此崩溃。

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

由于发送一百万崩溃它，我尝试发送十万批处理。我可以得到两个这样的批处理并解析 JSON。如果我的 AJAX 调用没有 onreadystatechange，我可以多次调用。另外，如果我收到十万条记录，我可以遍历十次并制作完整的数组。

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

为了尝试获得更好的内存管理，我已将 AJAX 请求和解析推送到 web worker 中。当 webworker 获取 AJAX 并制作十万条记录数组时，它会将其推送到 DOM 线程。当 DOM 线程获取数据时，它让 web worker 执行另一个 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);

这是网络 worker :

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

而不是一次发送整个数据。

您可以创建多个请求来检索数据 block ，而不是一次检索整个数据，这将防止您的浏览器崩溃。