如何阻止激烈的Javascript循环冻结浏览器

Question

我正在使用Javascript解析一个包含大约3,500个元素的XML文件.我正在使用jQuery"each"函数,但我可以使用任何形式的循环.
问题是浏览器在循环执行时冻结了几秒钟.在不降低代码速度的情况下停止冻结浏览器的最佳方法是什么？

$(xmlDoc).find("Object").each(function() {
    //Processing here
});

Answer 1

我会抛弃"each"函数,转而使用for循环,因为它更快.我还会使用"setTimeout"添加一些等待,但只是每隔一段时间,只有在需要时.您不希望每次等待5毫秒,因为处理3500条记录大约需要17.5秒.

下面是一个使用for循环的示例,它以5 ms的间隔处理100条记录(您可以调整它),这会产生175 ms的开销.

var xmlElements = $(xmlDoc).find('Object');
var length = xmlElements.length;
var index = 0;
var process = function() {
  for (; index < length; index++) {
    var toProcess = xmlElements[index];
    // Perform xml processing
    if (index + 1 < length && index % 100 == 0) {
        setTimeout(process, 5);
    }
  }
};
process();

我还会对xml处理的不同部分进行基准测试,看看是否存在可能修复的瓶颈.您可以使用firebug的探查器在firefox中进行基准测试,并像这样写入控制台:

// start benchmark
var t = new Date();
// some xml processing
console.log("Time to process: " + new Date() - t + "ms");

希望这可以帮助.

Answer 2

在处理之间设置timeOut以防止循环周期占用所有浏览器资源.总的来说,处理和循环所有内容只需要几秒钟,对于3,500个元素来说并非不合理.

var xmlElements = $(xmlDoc).find('Object');

var processing = function() {
  var element = xmlElements.shift();

  //process element;

  if (xmlElements.length > 0) {
    setTimeout(processing, 5);
  }
}

processing();

Answer 3

我考虑将3500个元素从xml转换为JSON服务器端,或者甚至更好地将其上传到服务器转换,这样它就可以从getgo中获取JS.

这样可以最大限度地减少负载,并使文件大小变小.