问带有下拉列表的模态对话框在解雇后不会立即消失。

EN

您正在放慢整个浏览器的速度，抓住DOM的脖子，并将10,000个<option>节点注入它的喉咙。您需要以某种方式懒惰负载您的数据。有没有在Twitter、Facebook和其他网站上注意到，当你滚动到页面底部时，它会开始从服务器加载更多的记录？好的应用程序将开始垃圾收集旧记录，这些记录也被滚动起来。

当你翻阅你的Facebook新闻提要时，它不会同时把你的朋友们2007年以来的所有帖子都加载到浏览器中。一旦DOM中存在最多的帖子，Facebook将开始删除您滚动的最老的帖子，以便为更多的内容腾出空间，并从服务器获取新的帖子，这样您就可以继续滚动。您甚至可以看到浏览器滚动条在向下滚动时跳起，因为有更多的帖子被添加到DOM中。

没有一个浏览器能够处理这么多数据。浏览器不是数据库。我很惊讶你的柱塞有10k的记录是如此的表演！哈哈。下拉列表不是您想要显示的数据。你必须坐下来，想出一个更好的方法来向用户展示数据。我的第一个想法是提供一个可过滤列表，该列表最初包含25个最选定的选项或其他选项，然后键入搜索字段将使其从与搜索条件匹配的服务器加载一个新列表。只有你知道你的用户到底想要什么，但我向你保证，这不是一个带有10k+选项的下拉列表。

示例：

​

​

注意浏览器滚动条在到达底部时是如何向上跳的。Twitter到达底部，然后加载更多的数据来滚动。如果我滚动得够远的话，它最终也会开始清理页面顶部的数据。

现代浏览器可以处理很多问题，但是10,000+ <option>节点正把它推到过头。

浏览器可以处理下拉列表中的大量值，但是下拉列表并不适合这样的任务。更不用说用户将很难选择适当的值，即使您按字母顺序排序。

如果使用输入文本框而不是下拉列表，情况会好得多。

jQueryUI有一些不错的自动完备特性，它不仅可以提高web应用程序的性能，而且还可以让用户体验更好。在任何一天，我都更愿意键入提供给我的10,000个选项中的一个，而不是用鼠标在下拉列表中搜索并选择它们。

下面是一个关于小提琴的例子与~8.5k记录的性能测试。

让我快速告诉你几点：

1. 滚动10K记录是一个可用性缺陷。考虑一个人通过10K选项，并选择一个他们想要的。不是个好主意。
2. 业绩问题：

- If the options were rendered from a back-end in a traditional way (non-Angular way) then it would just take time to load but after that the performance won't be such an issue.
- Since, you are using AngularJS with `ng-options`, the options are populated in the front-end and you have all the data in Angular's scope. To perform, two-way binding, Angular always does a dirty-checking in each '[**digest cycle**](http://www.sitepoint.com/understanding-angulars-apply-digest/)' which loops through each and every data element in $scope and causes that delay.

​

解决方案：

1. 使用Select2的"Loading Data“。Select2是基于jQuery的复选框的替代品。
2. 考虑使用AngularUI的Select2包装器而不是直接使用它。