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

我有一个angular应用程序，并将其与UI引导项目集成。我用的是普通的

带有包含750条记录的下拉菜单的模式对话框，当选择其中一项并单击“确定”或“取消”时，模式和覆盖将立即淡出

这是打劫者：

如果带有下拉菜单的模式对话框包含大约10k+条记录，并且从列表中选择了其中一项。单击“Ok”或“Cancel”并不是立即隐藏模式对话框，而是我在Chrome上有8-10秒的延迟，我还没有在IE上测试过

这是打劫者：

---

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

你抓住DOM的脖子，将10000个

节点塞进它的喉咙，从而降低了整个浏览器的速度。你需要以某种方式保存你的数据。有没有注意到在Twitter、Facebook和其他网站上，当你滚动到页面底部时，会开始从服务器加载更多记录？好的应用程序也会开始垃圾收集已经被卷起的旧记录

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

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

例如：

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

---

现代浏览器可以处理很多内容，但10000个以上的

节点将其推到了极致。

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

您最好使用输入文本框，而不是下拉框

jQueryUI

有一些优点，不仅可以提高web应用程序的性能，还可以让用户体验更容易接受。我宁愿在提供给我的10000个选项中键入一个，也不愿用鼠标在下拉菜单中搜索并选择它们

---

性能测试记录约为8.5k。

让我快速告诉您几点：

滚动浏览10K记录是一个可用性缺陷。考虑某人通过10K选项并选择他们想要的。这不是个好主意

性能问题：

• 如果选项是从后端以传统方式（非角度方式）呈现的，那么加载只需要时间，但在加载之后，性能将不会出现这样的问题
• 由于您将AngularJS与

  ng options

  一起使用，因此这些选项填充在前端，并且您拥有Angular范围内的所有数据。为了执行双向绑定，Angular始终在每个“”中执行脏检查，该检查循环通过$scope中的每个数据元素并导致延迟

解决方案：

使用“加载远程数据”。Select2是基于jQuery的选择框替换

考虑使用AngularUI而不是直接使用它

---

10K记录！！你是认真的吗？哪个用户将浏览它们？这是一场表演热。您正在渲染10K

节点。您的性能受到了影响，因为浏览器需要维护这些10K

节点并渲染它们。顺便说一句，从可用性的角度来看，750

也是一种不切实际的方法。伙计，你的问题已经出名了：哈哈，哇。并在推特上发布，说我有点咯咯笑。我没想到它会这样传开。抱歉orif:p很明显，从他的插件中，浏览器无法处理普通下拉列表中的大量值。从第一个示例到第二个示例的唯一变化是大量的

节点。你是对的，这就是为什么我建议在这种情况下使用

jQueryUI的autocomplete

。Alex和Chirag64，使用typeahead（autocomplete）是更好的解决方案吗而不是jQueryUI，因为我已经将angular UI引导与我的projec集成。这个用例实际上是从提供的列表中选择合适的数据（选项）。嗨，奥利夫，只要不影响性能，这应该也能很好地工作。您可以使用一些自定义JavaScript验证来确保数组中存在用户在文本框中输入的值。这与确保用户从提供的列表中选择适当的选项相同，并且没有其他值。嗨，Alex，我认为在我的情况下，无限滚动将不是可以选择的选项。因为我需要显示要选择的数据。可能“提前输入”（自动完成）将是可选的。当然可以。我不是真的把无限卷轴当作魔药给你看