如何提高搜索腳本的性能？

Question

我有很多項目和一些輸入的UL清單。 我的腳本監聽輸入的鍵，並顯示或隱藏與輸入字符串匹配的字段。

這是我的代碼：

$(function(){
    $('#srvSearchField').keyup(function(){
        var value = $(this).val();

        $('.srvClientBlock').each(function(){
            var currentFieldValue = $(this).children('.srvClientName').html();
            var exp = new RegExp(value);

            if (currentFieldValue.match(exp)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
});

如何改善效能？ 或者我應該在服務器上發送請求以找到匹配的值？

UPD：我決定使用Ajax來過濾客戶端。

var url = "<?php echo $searchClientUrl;?>";

$(function(){
    $('#srvSearchField').keyup(function(){
        var request = $(this).val();

        var callback = function(response) {
            $('.srvClientBlock').hide();

            var data = JSON.parse(response);
            for (var i = 0; i < data.length; i++) {
                $('#srvClient-' + data[i]).show();
            }
        };

        $.post(url, {"request" : request}, callback);
    });
});

謝謝大家的回答。

Answer 1

一些要點：

• 不要為每個搜索到的列表項重新創建正則表達式。
• 使用正則表達式的test方法代替match 。
• 將搜索到的文本（srvClientName）緩存在某個地方，因此您不必如此頻繁地查詢DOM。
• 您甚至可以將其緩存在DOM之外，因此僅在需要切換顯示時才需要訪問它（請參閱此答案以獲取示例 ）。
• 如果DOM更新仍然花費太長時間，請考慮a）在操作期間隱藏完整的UL b）僅在其計數低於一定數量時才顯示任何結果

當然，僅當列表內容沒有動態更改（或至少每次都需要重新構建緩存）時，才應用緩存。

在某些情況下，將每次搜索的請求發送到服務器才有意義：

• 有限的（移動）客戶端資源使得無法存儲和/或處理大量數據
• 帶寬有限，禁止下載整個數據
• 服務器上的實時數據（無法連續發送到客戶端）

但是它們需要足夠的帶寬來處理許多請求，並且延遲相對較小。 不過，您可以通過特殊的優化來解決這些問題。

// simple improvements, no caching:
$(function(){
    $('#srvSearchField').keyup(function(){
        var exp = new RegExp( $(this).val() );
        $('.srvClientBlock').each(function(){
            var $this = $(this);
            var currentFieldValue = $this.children('.srvClientName').text();
            $this[ exp.test(currentFieldValue) ? "show" : "hide" ]();
        });
    });
});

Answer 2

如果可以避免ajax請求，請這樣做。 您可能需要使用它們，但是如果遇到客戶端問題，瀏覽器只能處理那么多數據。

如果您需要處理ajax請求或大量數據，請將keydown事件設置為開始100-300 ms的超時，此超時將在每次后續的keydown中重置並重新啟動，從而調用搜索功能。 這樣，您的搜索將僅在用戶空閑200毫秒（不多，但足以大大減少搜索次數）時運行。