JavaScript 嵌套循环使函数执行速度太慢

Question

我有一个函数，其中包含一些嵌套的 for 循环并按预期工作。

问题是，它必须循​​环遍历大量数据，这意味着执行时间太长，并且在执行时经常会卡住浏览器。

从服务器获取的数据大约有 2000 多个元素。

任何人都可以建议一种更有效的方法来编写此函数，以减少迭代次数并加快进程吗？

function markers(boxes) {
    $.getJSON('empdata.json', function (data) {

          var json = data;
          for (var i = 0; i < boxes.length; i++) {

              for(var v = 0; v < json.length; v++) {

                  //loop through parsed markers within bounds
                  var obj = json[v];
                  if (boxes[i].contains(new google.maps.LatLng(obj.latitude, obj.longitude))) {
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(obj.latitude, obj.longitude),
                        map: map,
                    });

                  } else {
                      console.log("out of box");
                  }
              } //close bounds markers 

          } //close full loop parse
    })
};

该函数的第一部分只是使用 jQuery $.GetJSON 函数从静态 JSON 文件中获取有关 map 位置的数据。

第二部分循环遍历根据给定参数创建的边界框。最后，第三部分循环遍历 JSON 文件中的每个项目，并在给定边界内创建一个 map 图钉。

我认为问题是有很多框需要循环，乘以 JSON 文件中的 2000 多个项目意味着该函数每次都必须经历数千次迭代。

Answer 1

代码中的瓶颈不是嵌套循环本身，而是谷歌标记打印速度非常慢。

但是您可以执行以下操作:

• 避免重新创建临时变量，例如 var obj = json[v];，因为它会产生大量开销。最好重新分配该变量。 (这个原则也是像 Phaser.io 这样的快速 js 游戏库的基础。同样的情况:

  • for (var i = 0 ...
  • for(var v = 0 ...
  • var mark = new google.maps.Marker({ ...

• 避免调用new google.maps.LatLng(obj.latitude, obj.longitude)新对象的创建比赋值更昂贵。

• 您可以将标记的创建替换为 fusion tables
• 使标记尽可能细
• 使用DOM DocumentFragments (如果您看到 here 打印几乎是瞬时的)
• 不要控制台日志，因为它真的很慢!更好地将文本附加到 DOM div，充当页面日志。
• 异步!尝试将单个标记的打印委托(delegate)给异步回调，以避免花费时间等待标记创建结束。
• boxes[i].contains() 的复杂度是多少？看它是在内部循环中，所以它运行了 N * M 次，其中 N 是 boxes 的长度，M 是 json 的长度。从计算理论来看，这个函数优化得越多，整个截图的运行速度就越快。

<小时/>

编辑:

发现一个有趣的quick script该基准测试同步 2K 标记生成与异步标记生成。在我的电脑上，异步时运行时间下降了大约 22 倍。

核心功能是:

var createmarker=function(coordinates,index) {
  setTimeout(function() {
    var neighborMarker = new google.maps.Marker({
      position: coordinates,
      map: map,
      title:'Marker '+index,
      icon: 'https://cloud.githubusercontent.com/assets/238439/4837489/46de6daa-5fd7-11e4-9622-0e1cc674f6b2.png'
    });

    markersArray.push(neighborMarker );
  },10);
};

clearMarkers('Asynchronous',function(coordsArray,timeini) {
  for(var index=0;index<coordsArray.length;index++) {
    createmarker(coordsArray[index], index);
  }
});