解雇后，帶有下拉列表的模態對話框不會立即消失

Question

我有一個角度應用程序，並將其與UI Bootstrap項目集成在一起。 我正在使用常規

帶下拉菜單的模態對話框包含750條記錄，當選中其中一項並單擊“確定”或“取消”時，模態和疊加層會立即淡出。

Here's the plunker: 具有750條記錄的模態對話框

如果帶有下拉菜單的模態對話框包含約10k +條記錄，並且從列表中選擇一項。 單擊“確定”或“取消”並沒有立即隱藏模式對話框，相反，我在Chrome上有8-10秒的延遲，我尚未在IE上進行測試。

Here's the plunker: 具有10k +條記錄的模式對話框

問題：為什么我的性能受到更多數據的影響？

Answer 1

通過抓住DOM並向下傾倒10,000個<option>節點，您正在減慢整個瀏覽器的速度。 您需要以某種方式延遲加載數據。 在Twitter，Facebook等網站上是否曾經注意到，當您滾動到頁面底部時，它將開始從服務器加載更多記錄嗎？ 好的應用程序將開始垃圾收集已經向上滾動的舊記錄。

當您滾動瀏覽Facebook新聞源時，它不會同時加載您自2007年以來的所有朋友帖子。 一旦DOM中存在最大數量的帖子，Facebook將開始刪除您向上滾動的最舊帖子，以騰出更多空間，並從服務器中獲取新帖子，以便您可以繼續滾動。 您甚至可以看到瀏覽器的滾動條在向下滾動時會跳起來，因為有更多的帖子正在添加到DOM中。

沒有瀏覽器能夠處理那么多數據。 瀏覽器不是數據庫。 令您驚訝的是，您的10萬首唱片表現出如此出色的表現！ 哈哈。 下拉列表不是您想要顯示的數據。 您將不得不坐下來，想出一種更好的方式向用戶顯示數據。 我的第一個想法是提供一個可篩選列表，該列表最初包含前25個最常選擇的選項或其他內容，然后在搜索字段中鍵入內容會使其從服務器上加載符合搜索條件的新列表。 只有您會知道用戶的實際需求，但是我向您保證，它不是具有10k +選項的下拉列表。

例：

請注意，瀏覽器滾動條到達底部時是如何跳起來的。 Twitter到達底部，然后加載更多數據以滾動瀏覽。 如果我滾動足夠遠，它將最終也開始清除頁面頂部的數據。

現代瀏覽器可以處理很多事情，但是10,000+個<option>節點將其推向了高潮。

Answer 2

瀏覽器可以處理下拉列表中的大量值，但下拉列表並不適用於此類任務。 更不用說用戶即使要按字母順序對它們進行選擇也將很困難。

使用輸入文本框而不是下拉列表會更好。

jQueryUI具有一些不錯的自動完成功能 ，這些功能不僅可以改善Web應用程序的性能，而且還可以使用戶體驗更加舒適。 與使用鼠標在下拉菜單中搜索並選擇它們相比，我每天都更願意鍵入提供給我的10,000個選項之一。

這是jsfiddle上的一個示例，具有約8.5k條記錄用於性能測試。

Answer 3

讓我快速告訴您幾點：

1. 滾動瀏覽10K記錄是一個可用性錯誤。 考慮某人經過10K選項並選擇他們想要的選項。 這不是一個好主意。

2. 性能問題：

   • 如果以傳統方式（非角度方式）從后端渲染選項，則加載時間將很長，但是之后的性能將不再是問題。
   • 由於您將AngularJS與ng-options ，因此選項被填充在前端，並且所有數據都在Angular的范圍內。 為了執行雙向綁定，Angular總是在每個“ 摘要周期 ”中進行臟檢查，該檢查循環遍歷$ scope中的每個數據元素並導致該延遲。

解：

1. 使用Select2的“ 加載遠程數據 ”。 Select2是基於jQuery的選擇框的替代品。
2. 考慮使用AngularUI的Select2包裝器，而不是直接使用它。