優化角度濾波器的性能

Question

我正在過濾一個相當小的數據集，但是仍然存在一些性能問題（當過濾器不夠簡潔時，UI線程凍結）。

    <input type="text" ng-model="vm.user" />
    <table class="tbl" ng-show="vm.user.length > 2">
        <tbody ng-repeat="p in vm.permissions | filter: {UserName: vm.user}:false">

問題僅在於有很多記錄時，因此我嘗試通過在搜索中輸入少於3個字符時隱藏整個內容來提高性能。

不幸的是，即使隱藏了數據集，它似乎仍然在操縱dom（在我鍵入過濾器時，UI凍結）。

當字符較少時，是否有辦法使其不做任何事情，和/或以其他方式提高性能？

Answer 1

我將提出3條建議來提高性能：

1. 正如New Dev所說，使用ng-if而不是ng-show從DOM中刪除整個節點，這意味着在已刪除的節點上根本不會進行任何指令處理。 我現在傾向於在99％的場景中使用ng-if ，除非我知道該選項的可見性會切換很多，因此修改現有節點的類比一遍又一遍地插入和刪除同一節點要快。
2. 在ng-repeat表達式中使用track by 。 這意味着Angular將對數組中具有相同匹配值的項目重復使用DOM節點。 例如，如果您track by p.UserName （只要UserName是100％唯一的），則如果它遇到一條具有相同用戶名的記錄，它將使用與以前相同的DOM節點，而不是重新創建一個新的DOM節點。
3. 使用ng-model-options對過濾器輸入進行反跳操作 ，以便如果用戶快速鍵入內容，則並非每次擊鍵都會觸發新的過濾操作。 您可能需要嘗試在目標瀏覽器中找到適合您的正確超時值。

我創建了一個示例Plunkr ，它展示了這些技術的實際應用。 當我嘗試使用“權限”列表中的100,000條記錄（示例中僅是虛擬用戶）時，它在Chrome中仍然非常快。 但是，沒有在其他瀏覽器中進行測試。