Chrome中DOM操作缓慢(隐藏/显示元素）

我在http://jsfiddle.net/Hwqb3/3/今天早上这是在一个更大的分页项目的背后。我已经用原生JS和jQuery尝试过了。该测试使用jQuery。

在SO上快速搜索显示，如果设置了背景大小，Chrome处理得很差，但这里的情况并非如此。源中没有背景大小的痕迹，并且检查元素显示没有设置/继承背景大小。

忽略初始页面加载，同时将5000个元素添加到列表中。这只是几秒钟的时间，但它只是为了有一些元素可以测试。

在Firefox 18.0.1中，页面之间的移动几乎是即时的，在IE9中，鼠标点击和页面结果刷新之间可能有0.1s的延迟；然而，在Chrome（24.0.13125.57米）中，延迟明显为1-2秒。

昨晚我花了大半个晚上的时间仔细研究我的代码，看看在写这个测试之前是否能找到原因。这是赤裸裸的，仍然存在问题。

我只能假设Chrome正在处理元素.style.display=''；糟糕。如果没有这一点（甚至在5000个元素中循环显示=‘none’），事情就很快了。

有什么想法吗？客户端希望对大约4000-7500的结果集进行分页，但不希望重新加载页面，并且不明白他们应该应用过滤器将该列表缩减为<100，因为从来没有人会翻阅200-375页来寻找特定的东西。

最后的办法是AJAX调用，在Chrome上可能会稍微快一点。但尚未测试。

提前谢谢。

jsfiddle的代码，不包括jQuery CDN链接

HTML:

<a href="javascript:jump('first');">First</a>
<a href="javascript:jump('-1');">Previous</a>
<a href="javascript:jump('+1');">Next</a>
<a href="javascript:jump('last');">Last</a>
<br>
<ul id='list'>
</ul>

JS:

window.onload=function() { 
    window.list=$('#list'), window.max=20, window.page=0, window.pages=0, window.elements;
    var i=0;
    while(i<5000) {   
        i++;
        list.append("<li>"+i+"</li>");
    }
    jump('first');
};
function jump(operation) {
    window.elements=list.find('li');
    window.pages=Math.ceil(window.elements.length/window.max);
    if(operation=='first') {
        window.page=0;
    }
    else if(operation=='last') {
        window.page=(window.pages-1);
    }
    else if(operation=='+1') {
        window.page=(window.page+1);
        if(window.page>=window.pages) {
            window.page=(window.pages-1);
        }
    }
    else if(operation=='-1') {
        window.page=(window.page-1);
        if(window.page<0) {
            window.page=0;
        }
    }
    var showing=0, total=0;
    window.elements.each(function() {
        var show=false, self=$(this);
        if(showing<window.max) {
            if(total>=(window.page*window.max) && total<((window.page*window.max)+window.max)) {
                self[0].style.display='';
                showing++;
                show=true;
            }
        }
        if(!show) {
            self[0].style.display='none';
        }
        total++;
    });

}

window.onload = function() { 
    window.list = $('#list'), 
    window.max = 20, 
    window.page = 0, 
    window.pages = 0, 
    window.elements;
    var i = 0;
    var html = '';
    while(i < 5000) { 
        i++
        html += '<li>' + i + '</li>';
    }    
    list.append(html);
    window.elements = list.find('li');
    window.pages = Math.ceil(window.elements.length/window.max);    
    jump('first');
};

function jump(operation) {
    if (operation == 'first') 
        window.page = 0;
    else if (operation == 'last') 
        window.page = window.pages - 1;
    else if (operation == '+1') 
        (window.page + 1 >= window.pages) ? window.page = window.pages - 1 : window.page++ ;
    else if (operation == '-1') 
        (window.page - 1 < 0) ? window.page = 0 : window.page--;
    var index = page * window.max;
    window.elements.hide().slice(index, index + window.max).show();
}