加载最多约 30,000 条记录的相关下拉列表时的性能影响答案

【问题标题】：Performance impact on loading interrelated dropdowns with max of arounf 30,000 records加载最多约 30,000 条记录的相关下拉列表时的性能影响
【发布时间】：2014-09-24 09:32:09
【问题描述】：

这是场景：

我的 Spring MVC 应用程序的 JSP 页面中有 4 个下拉菜单。下拉列表（国家、州、部门和村庄）彼此相关，因为在选择特定国家时会加载带有状态值的状态下拉列表，选择特定状态会加载部门下拉列表中的值等等。我的应用程序中的最大记录数是：

国家/地区：75
状态：1,000
师：3,000
村庄：30,000

数据存在于 4 个哈希图中，例如：

 - Map of String CountryId key with String Name as value
 - Map of String CountryId key with (Map of String StateId key with String StateName) as value
 - Map of String StateId key with (Map of String DivisionID key with String DivisionName) as value
 - Map of String DivisionId key with (Map of String VillageId key with String VillageName) as value

问题：

目前我正在 JSP 页面上加载所有 4 个哈希图，并根据先前下拉列表的选择在下拉列表中显示值：`

$("#country").on("change", function(e) {
    var stateMap = '${stateList}';
    var jsondata = $.parseJSON(stateMap );
    $.each(jsondata[$(this).val()], function (key, value) {
        $('#state').append($('<option></option>').val(key).html(value)).prop('disabled',false);
    });
});

在这里，在下拉列表中填充值是在 javascript 本身中处理的。 我这样做是为了减少服务器上的点击次数。 但是考虑到哈希图中的大量记录，它是在下拉列表中填充数据的正确方法吗？或者每次在下拉列表中选择一个值以填充后续下拉列表中的值时，我是否应该进行 AJAX 调用。

从性能角度来看，这两种方法中哪一种更合适。

【问题讨论】：

您可能需要考虑使用 AJAX 来仅下载列表中所需的部分。 So when a Country is selected it downloads the list of states/counties for that country.
@Jaydee：是的，我知道我可以选择根据下拉列表中选择的值仅填充选择性数据。我想知道什么是更好的方法。一次加载数据或多次点击服务器（Ajax）并在那里加载数据。
如何定义“更好”？一次下载所有内容意味着您的页面最初需要更长的时间来下载，但响应速度会稍微快一些。使用 AJAX 将意味着页面最初加载速度更快，但在选择每个选项后会有延迟。如果您在 100mbit 网络上运行它，您可能不会注意到差异。在慢速 ADSL 连接上运行它可能意味着有些人在初始加载完成之前点击另一个页面。

标签： java javascript performance jsp drop-down-menu

【解决方案1】：

在这里，在下拉列表中填充值是在 javascript 本身中处理的。我这样做是为了减少服务器上的点击次数。但是考虑到哈希图中的大量记录，它是在下拉列表中填充数据的正确方法吗？

我敢打赌这是个好主意

国家/地区：75

也许

状态：1,000
甚至分区：3,000

但是

不适用于村庄：30,000

每次在下拉列表中选择一个值以填充后续下拉列表中的值时，我是否应该执行 AJAX 调用。

我会去的。每个子列表都是静态资源，无需计算，可以很快提供服务。如果幸运的话，调用大约需要 50-100 毫秒，即远低于人类的感知。

您还可以运行 AJAX 调用来获取整个列表。这将使您的页面加载速度更快并且请求数量减少。最后，只有测量才能告诉您，什么最适合您的环境。

请注意，您不必发出 4 个请求，每个实体类型一个。你可以例如将所有 75 个国家/地区放入您的页面本身，然后加载所选国家/地区的所有内容。

【讨论】：