Question

我知道有一些关于jquery点击事件性能的类似问题，但我并不满意，因为它与我某个环境的条件不符。

环境：在内部Web应用程序项目中，我有一个selectbox替换，它提供搜索选项，包括隐藏值。例如。按其制造商，其名称，单位大小或商品编号或EAN（由选项值表示）搜索文章选项数量可以只有12或5.000（在桌面上测试最多120.000选项，在移动设备上最多可达5.000）

HTML

<ul id="selectbox" class="fr softmenu fr" style="margin: 0px; visibility: visible;">
    <li class="list_header">
        <span class="title">t2s_test</span>
        <button class="close"></button>
        <input class="t2s t2s_init" placeholder="type to search" type="text" value="lor ips dol">
        <button class="t2s_delete"></button>
        <button class="t2s_fulltext"></button>
    </li>
    <li class="list iscroll" scroller="0">
        <ul class="list iscroll" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
            <li t2s="592 ipsum dolor nascetur pede vivamus" data-value="592">augue rhoncus condimentum lorem libero</li>
            <li t2s="1234 lorem ipsum dolor ultricies nisi" data-value="1234">maecenas blandit odio quis ante</li>
            <li t2s="2366 dolor nulla quis semper lorem" data-value="2366">tellus phasellus metus ipsum nullam</li>
            <li t2s="3232 dolor pede tincidunt vulputate eleifend" data-value="3232">lorem nisi ipsum ante amet</li>
            <li t2s="4621 lorem ipsum dolor amet sem" data-value="4621">consequat nulla ullamcorper nisi condimentum</li>
            <li t2s="4977 dolor dis nascetur donec cras" data-value="4977">lorem augue sed ipsum sit</li>
        </ul>
    </li>
</ul>

这里是javascript过滤功能（缩短）

var res = $(ui.var.t2s_backup).filter(function() {
    // --- processing filter 
});
if (vl && t==0) { // --- input not empty, but no results ?
    ul.html('<li class="t2s_fulltext">No results. Perform fulltext search instead ?</li>');
}
else ul.html(res); // --- display results, ul is variable name of $('ul.softmenu > li.list > ul.list')

要绑定列表元素上的click事件，目前我正是这样做的 （变体1.1）

$(document).click(function(e){
    var el = $(e.target);
    if (el.is('ul#selectbox.softmenu ul.list > li')) {
        // --- do things
    }
});

或这种方式（似乎有点快，我会尽快更换） （变体1.2）

$(document).on('click','ul#selectbox.softmenu ul.list > li',function(e){
    var el = $(e.target);
    // --- do things
});

但是我想，一旦加载了列表，将click事件绑定到每个单个列表项是一个坏主意（请记住，可能存在一些问题） （变体2）

$(document).ajaxComplete(function(e){
    $('ul#selectbox.softmenu ul.list > li').click(function(e) {
        // --- do things
    });
});

或者将click事件绑定到每个列表项，一旦执行过滤器功能，就像 （变体3）

var res = $(ui.var.t2s_backup).filter(function() {
    // --- processing filter 
});
if (vl && t==0) {
    ul.html('<li class="t2s_fulltext">No results. Perform fulltext search instead ?</li>');
}
else {
    ul.html(res);
    ul.find('> li').click(function(){
        // --- do things
    });
}

哪种变体提供最佳性能和最小的浏览器内存负载？另外请记住，必须组合变体2和3，var2表示“不需要搜索，想直接点击项目”，var3表示“需要执行搜索和找到项目”。谢谢你的回答。

为5000个项目附加事件处理程序的最佳方法是什么？

0 个答案: