jQuery選擇器性能下降

Question

我正在以MVC格式渲染超過600個表單（php Codeigniter）。 這些表單中的每一個都有一個標有“更多選項”的按鈕。 單擊此按鈕時 - 將切換位於同一父元素中的隱藏div，顯示更多輸入字段和數據。 問題是在控制台中兄弟切換很快，但是當我點擊實際按鈕時，觸發需要很長時間。

使用id是推薦的修復，但是當我有這么多的div元素時，這有點不切實際。

這是我的js文件

jQuery(document.ready(function(){
    jQuery("form >button[name='more_data'].meta_button").click( function(){  
        jQuery(this).siblings("div.meta").toggle("fast");
    });
});

這是結構（這些div有650個，還有更多）

<div>
    <li id="bCIya8DZyr4idseJe5cbLA" class="even">
        <form action="url" method="post" accept-charset="utf-8">
            <div class="space_name"></div>
            <button name="more_data" type="button" class="meta_button">More Options</button>
            <input type="submit" name="Submit" value="Submit">
            <div class="meta" style="overflow: hidden; display: block;">
                <div class="meta_block">Set Estimates:
                    <div class="input_estimate">1:
                        <input type="number" name="estimate_1" value="" id="estimate_1" class="estimate">
                    </div>
                    <div class="input_estimate">2:
                        <input type="number" name="estimate_2" value="" id="estimate_2" class="estimate">
                    </div>
                    <div class="input_estimate">3:
                        <input type="number" name="estimate_3" value="" id="estimate_3" class="estimate">
                    </div>
                </div>
            </div>
        </form>
    </li>
</div>

注意：我正在運行jQuery 1.7.2

Answer 1

不要使用代表

當你有多個事件監聽器時，使用像@jrummell建議的委托（ .on()和@jrummell建議更快，因為你將監聽器的數量減少到一個。

使用類更簡單的選擇器

所以在這種情況下我會建議使用更簡單的選擇器：

$(function(){
    $('.meta_button').on('click', function(){
        $(this).siblings('div.meta').toggle('fast');
    });
});

這樣，當觸發點擊時，您可以使用相當簡單的選擇器並減少檢查，因為沒有委托。 此外，不會捕獲表單中其他元素的點擊。

動畫減慢了速度

動畫可以減慢速度。 同時在多個元素上執行的動畫甚至更多。

嘗試在單個父級中移動所有div.meta元素，並僅在該單個元素上應用動畫。

您也可以通過使用toggle()完全刪除動畫toggle()在這種情況下，關於多個項目的注釋仍然有效）。

示例 ：

$(function(){
    $('.meta_button').on('click', function(){
        $(this).parent().find('.meta_holder').toggle();
        // OR
        // $(this).next('.meta_holder').toggle();
    });
});

Answer 2

包括jQuery.ui.css使重新顯示速度極慢。 昂貴的css規則殺死了顯示並減慢了渲染時間。 “正確方向的推動”在問題的評論中。