大json(像100MB)在javascript中表现出色

时间:2014-07-11 10:51:25

标签: javascript

我是REST技术的新手。我目前正在处理来自服务器的json响应并在客户端呈现数据。

我现在得到大约22MB的json数据,我需要将它导出到excel表。

我的问题:

当我迭代到json时,浏览器没有响应。我做错了什么?

1 个答案:

答案 0 :(得分:0)

理想,你不应该导出这么大的excel文件供下载。您必须将数据分成块并要求用户批量下载。但是,如果它可能是您要求的一部分,那么请参考下面的答案。

您可能需要批量下载json并合并为一个excel文件并要求用户下载!

无响应的脚本对话框显示某些javascript线程太长时间太完整。编辑注册表可以工作,但您必须在所有客户端计算机上执行此操作。你可以使用如下的“递归闭包”来缓解这个问题。它只是一个编码结构,允许你长时间运行循环并将其转换为可以完成某些工作的东西,并跟踪它停止的位置,屈服于浏览器,然后继续它停止的地方直到我们完成。

图1,将此实用程序类RepeatingOperation添加到您的javascript文件中。您无需更改此代码:

RepeatingOperation = function(op, yieldEveryIteration) {

  //keeps count of how many times we have run heavytask() 
  //before we need to temporally check back with the browser.
  var count = 0;   

  this.step = function() {

    //Each time we run heavytask(), increment the count. When count
    //is bigger than the yieldEveryIteration limit, pass control back 
    //to browser and instruct the browser to immediately call op() so
    //we can pick up where we left off.  Repeat until we are done.
    if (++count >= yieldEveryIteration) {
      count = 0;

      //pass control back to the browser, and in 1 millisecond, 
      //have the browser call the op() function.  
      setTimeout(function() { op(); }, 1, [])

      //The following return statement halts this thread, it gives 
      //the browser a sigh of relief, your long-running javascript
      //loop has ended (even though technically we havn't yet).
      //The browser decides there is no need to alarm the user of
      //an unresponsive javascript process.
      return;
      }
    op();
  };
};

图2,以下代码表示导致“停止运行此脚本”对话框的代码,因为它需要很长时间才能完成:

process10000HeavyTasks = function() {
  var len = 10000;  
  for (var i = len - 1; i >= 0; i--) {
    heavytask();   //heavytask() can be run about 20  times before
                   //an 'unresponsive script' dialog appears.
                   //If heavytask() is run more than 20 times in one
                   //javascript thread, the browser informs the user that
                   //an unresponsive script needs to be dealt with.  

                   //This is where we need to terminate this long running
                   //thread, instruct the browser not to panic on an unresponsive
                   //script, and tell it to call us right back to pick up
                   //where we left off.
  }
}

图3.以下代码是图2中有问题代码的修复。注意for循环被替换为递归闭包,每10次repeattask()将控制权传递回浏览器

process10000HeavyTasks = function() {

  var global_i = 10000; //initialize your 'for loop stepper' (i) here.

  var repeater = new this.RepeatingOperation(function() {

    heavytask();

    if (--global_i >= 0){     //Your for loop conditional goes here.
      repeater.step();        //while we still have items to process,
                              //run the next iteration of the loop.
    }
    else {
       alert("we are done");  //when this line runs, the for loop is complete.
    }
  }, 10);                   //10 means process 10 heavytask(), then
                            //yield back to the browser, and have the
                            //browser call us right back.

  repeater.step();          //this command kicks off the recursive closure.

};

改编自此来源:

http://www.picnet.com.au/blogs/Guido/post/2010/03/04/How-to-prevent-Stop-running-this-script-message-in-browsers