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

Question

我正在使用Javascript解析具有大约3500个元素的XML文件。我正在使用jQuery“每个”函数，但可以使用任何形式的循环。

问题是循环执行时浏览器冻结了几秒钟。停止冻结浏览器而不降低代码速度的最佳方法是什么？

$(xmlDoc).find("Object").each(function() {

    //Processing here

});

Answer 1

我会放弃“每个”功能而赞成使用for循环，因为它更快。我还将使用“ setTimeout”添加一些等待，但仅在需要时才如此。您不想每次等待5毫秒，因为处理3500条记录大约需要17.5秒。

下面是一个使用for循环的示例，该循环以5毫秒的间隔处理100条记录（您可以对其进行调整），从而产生175毫秒的开销。

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

在处理之间设置一个超时，以防止循环周期耗尽所有浏览器资源。总共只需要花费几秒钟的时间来处理和遍历所有内容，这对于3500个元素而言并非不合理。

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。

这将最大程度地减少您的负载，并且也会使文件大小也变小。