Angularjs下拉多选需要很长时间加载

Angularjs Dropdown multiselect taking a long time to load

本文关键字：长时间加载 Angularjs 更新时间：2023-09-26

我正在使用http://dotansimha.github.io/angularjs-dropdown-multiselect/#/。对于超过500的列表，这个下拉菜单的加载速度非常慢。显示选项需要整整一分钟。有更好的替代方案吗?请建议。

你遇到了一个DOM的基本挑战，这个挑战经常被错误地归咎于Angular。一个简单的事实是，创建500个元素并将其注入DOM总是很慢的，无论你是使用Angular还是其他工具来做这件事。Angular让ng-repeat很容易做到这一点，但你不应该这么做。在这种情况下，每个"项目"似乎有3个DOM元素，所以你实际上为500个项目创建了1500多个DOM元素。滚动性能也会很糟糕。

所以，这就是为什么你有问题，但不是解决问题的办法。首先，我要考虑的是，拥有500个选项的多重选择是否真的是一种有用的方法。对于用户来说，这听起来从根本上令人困惑和困难。更像自动完成标记接口(如SO)的东西可能更适合这么多选项，并且可以避免将所有选项都注入DOM。

一般来说，显示500项列表的最佳方式是…而不是实际创建500个DOM元素。目前最好的方法是只创建适合屏幕的元素，然后在滚动时循环使用内容。在你的用例中使用Ionic的收集-重复指令可以显著提高性能。

我看不出有任何方法可以使这个特定的指令在500项下执行得更好，如果没有沿着这些行进行重大重构。这不是一段糟糕的代码，只是不适合那种大小的列表。

我也有同样的问题。只需将$ajax请求更改为'async: false'即可解决此问题。

让$ajax请求先完成，然后再加载DOM。在'async: true'请求的情况下，它不会等待服务器响应并加载DOM。