Question

我正在使用这个javascript对象，其中包含城市列表以及状态依赖性详细信息。

var cityList = {
'1' : ['CITY_CODE_A','City A', '2','11','2'],
'2' : ['CITY_CODE_B','City B','','11',''],
'3' : ['CITY_CODE_C','City C', '','11','']
};
var stateList = {
'11' : ['STATE_CODE_A', 'State A'],
'12' : ['STATE_CODE_B', 'State B'],
'13' : ['STATE_CODE_C', 'State C'],
'14' : ['STATE_CODE_D', 'State D']
};

根据所选的状态，键被传递给一个函数，该函数将键与城市列表中的值（数组中的索引3元素）匹配，如果找到则形成<select>的选项标记。这是代码：

$.each(cityList, function(key, value) {
  if(selectedVal == value[3]){
  $("select[id='"+selectid+"']").append('<option value="'+value[0]+'" code="'+key+'">'    +value[1] + '</option>'); 
  }
});

现在，当这个城市列表增长到50K记录（2 MB）时，状态有50K个城市（性能测试），上面的代码需要2分钟来加载在本地运行代码的Windows 7机器上的城市列表下拉列表。尝试使用原生for / in循环，但未获得满意的结果。

关于如何缩短时间的任何想法？我是否需要更改JS对象结构？

Answer 1

我也是更好地使用搜索而不是50k滚动项目的朋友。但要回答您的问题，我会使用以下方法改进您的代码：

var html = '';
$.each(cityList, function (key, value) {
    html += '<option value="' + value[0] + '" code="' + key + '">' + value[1] + '</option>'
});

$("select[id='1']").append(html);

这将大大加快您的option创建速度，因为DOM只会更改一次，而不会像您在示例中所说的那样更改50k次。（Short Demo）

Answer 2

编辑：@ downvoters，你能解释为什么你认为它错了吗？但首先尝试运行this test。

如果您想要获取特定州的城市，您可以创建一个地图，其中州ID是关键，

var cityList = {
   11 : [ ['CITY_CODE_A','City A', '2','11','2'], ['CITY_CODE_B','City B','','11',''] ],
   12 : [ ['CITY_CODE_C','City C', '2','12','2'], ['CITY_CODE_D','City D','','12',''] ]
}

现在您只需要迭代citylist[ selectedVal ]

$.each(cityList[selectedVal], function(key, value) {
  $("select[id='"+selectid+"']").append('<option value="'+value[0]+'" code="'+key+'">'    +value[1] + '</option>'); 
});

为了进一步优化它，你应该避免在循环中操作DOM（添加<option>个元素），而是缓冲它：

var $selectEl = $('<select />');
$.each(cityList[selectedVal], function(key, value) {
  $selectEl.append('<option value="'+value[0]+'" code="'+key+'">'    +value[1] + '</option>'); 
});
$selectEl.attr( 'id', selectid );
$("select[id='"+selectid+"']").replaceWith( $selectEl );

迭代关联数组耗时太长

2 个答案: