javascript/jQuery getJSON 内部循环非常慢答案

【问题标题】：javascript/jQuery getJSON very slow with a inner loopjavascript/jQuery getJSON 内部循环非常慢
【发布时间】：2014-07-29 20:33:49
【问题描述】：

我正在使用 OpenLayers 为 layerswitcher 渲染 DOM，大约有 1200 个 div。问题可以简化如下。

这非常快（3 秒左右）：

var allLayers = [layerMapnik, layerCycleMap];

for(var ii = 0; ii < 1200; ++ii) {
    console.log("ii = " + ii.toString());
    var groupName = "wms/Transit/railroad/image/" + ii;
    var layName = "CycleMap" + ii.toString();
    var oneLayer = new OpenLayers.Layer.XYZ(layName, "http://whatever/tile/${z}/${y}/${x}", {visibility: false, group:groupName});
    allLayers.push(oneLayer);
}

console.log("adding layers");

map.addLayers(allLayers);

$.getJSON("sampleArray.json", {}, function( doc ) {
    console.log(doc.length);
 });

但是，一旦将 for 循环放入 getJson 回调中，它就会非常缓慢并冻结浏览器，即使 for 循环根本没有读取“文档”！

var allLayers = [layerMapnik, layerCycleMap];

$.getJSON("sampleArray.json", {}, function( doc ) {
    console.log(doc.length);
    for(var ii = 0; ii < 1200; ++ii) {
        console.log("ii = " + ii.toString());
        var groupName = "wms/Transit/railroad/image/" + ii;
        var layName = "CycleMap" + ii.toString();
        var oneLayer = new OpenLayers.Layer.XYZ(layName, "http://whatever/tile/${z}/${y}/${x}", {visibility: false, group:groupName});
        allLayers.push(oneLayer);
    }
    console.log("adding layers");

    map.addLayers(allLayers);
 });

再简单的json文件也是sampleArray.json：

[
  {
    "a": 123,
    "b": 456
  },
  {
    "c": "ccc",
    "d": "ddd"
  } 
]

我是否使用了错误的 getJSON 或回调？或者它是一个 OpenLayer 的东西？

我也试过 $.each 代替 for 循环，没有帮助。

【问题讨论】：

1200 次迭代与嵌套 for 循环？这肯定会加剧滞后。页面上的 1200 个 div 可能不会以任何方式运行良好。我会寻求涉及分页的解决方案。
我的印象是向 DOM 添加 1200 个 div 并没有那么糟糕，正如“快速示例”所示 blog.korynunn.com/javascript/the-dom-isnt-slow-you-are 。我很困惑为什么它在回调中变得超级慢。
是循环慢的问题，还是真正调用回调之前getJSON需要一段时间才能完成的问题？您可以尝试添加一些控制台日志消息来检查 getJSON 需要多长时间才能拉入您的 JSON 文件。
循环本身很快（1200 循环 30秒并冻结浏览器）。
OpenLayers.Layer.OSM.CycleMap 是一个 TMS (slippy map tile layer)，参见这篇文章 stackoverflow.com/questions/21005356/… 并且不应该像这样在循环中添加 1000 次。我不知道为什么在循环中执行它和在回调中循环执行它之间存在这样的性能问题，但是添加相同的地图图块 1000 次绝对是不行的，并且几乎反对 OSM使用政策。顺便说一句，关于上面 DOM 的链接很好。

标签： javascript jquery json get openlayers

【解决方案1】：

回答我自己的问题，以供将来参考。

添加的 LayerSwitcher 也应该在回调函数中。因为整个 LayerSwitcher div 应该在添加到主 html 之前生成，否则切换器中每个添加层的重绘会减慢速度并冻结浏览器。

此外，在 $(document).ready() 之外调用 $.ajax 有助于加快速度，因为数据获取不需要等待 $(document)

【讨论】：