带有下拉列表的模态对话框在解雇后不会立即淡出

Question

我有一个角度应用程序，我将其与UI Bootstrap项目集成。我正在使用常规

带有包含750条记录的下拉列表的模态对话框，当选择其中一个项目并单击“确定”或“取消”时，模态和叠加层将毫不拖延地淡出。

Here's the plunker: Modal dialog with 750 records

如果带有下拉列表的模态对话框包含大约10k +条记录，则从列表中选择其中一个项目。单击“确定”或“取消”并不是立即隐藏模态对话框，而是我在Chrome上有8到10秒的延迟，我还没有在IE上测试过。

Here's the plunker: Modal dialog with 10k+ records

问题：为什么我的性能会受到更多数据的影响？

Answer 1

你通过抓住颈部的DOM并将10,000 <option>个节点倒在喉咙上，从而减慢了整个浏览器的速度。您需要以某种方式lazy load您的数据。在Twitter，Facebook和其他网站上注意到，当你滚动到页面底部时，它会开始从服务器加载更多记录吗？好的应用程序将开始垃圾收集已经滚动的旧记录。

当您滚动浏览Facebook新闻Feed时，它不会同时将自2007年以来的所有朋友发布到浏览器中。一旦DOM中存在最大数量的帖子，Facebook将开始删除您向上滚动的最旧帖子以腾出更多空间并从服务器获取新帖子，以便您可以继续滚动。您甚至可以在向下滚动时看到浏览器滚动条跳过，因为有更多帖子被添加到DOM中。

没有浏览器能够处理那么多数据。浏览器不是数据库。令我惊讶的是，你的普通话有10k的记录就像它一样高效！哈哈。下拉列表不是您要显示该数据的内容。您将不得不坐下来想一个向用户显示数据的更好方法。我的第一个想法是提供一个可过滤的列表，该列表最初包含前25个最常选择的选项或某些内容，然后在搜索字段中键入会导致它从服务器加载与搜索条件匹配的新列表。只有你会知道你的用户真正想要什么，但我向你保证这不是一个10k +选项的下拉列表。

示例：

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

现代浏览器可以处理很多，但是10,000多个<option>节点正在推动它过度使用。

Answer 2

浏览器可以在下拉列表中处理大量值，但下拉列表不适用于此类任务。更不用说用户将很难选择合适的值，即使您按字母顺序对它们进行排序。

使用输入文本框而不是下拉列表会好得多。

jQueryUI有一些不错的autocomplete features，不仅可以提高您的网络应用程序的性能，还可以让用户体验更加可忍受。我愿意在任何一天输入提供给我的10,000个选项中的一个，而不是使用鼠标在下拉列表中搜索它们并选择它们。

Here's an example on jsfiddle，性能测试记录约为8.5k。

Answer 3

让我快点告诉你几点：

1. 滚动10K记录是一个可用性错误。考虑有人通过10K选项并选择他们想要的选项。不是一个好主意。

2. 效果问题：

   • 如果选项是以传统方式（非Angular方式）从后端渲染的，那么加载只需要时间，但之后性能不会是这样的问题。
   • 由于您使用的是带有ng-options的AngularJS，所以选项会填充在前端，并且您拥有Angular范围内的所有数据。为了执行双向绑定，Angular总是在每个' digest cycle '中进行脏检查，它会循环遍历$ scope中的每个数据元素并导致延迟。

解决方案：

1. 使用Select2的“加载远程数据”。 Select2是基于jQuery的选择框替换。
2. 考虑使用AngularUI的Select2 wrapper而不是直接使用它。