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

Question

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

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

在列表中添加 5,000 个元素时忽略初始页面加载。它只有几秒钟，但它只是为了测试一些元素。

在 Firefox 18.0.1 中，页面之间的移动几乎是即时的，而在 IE9 中，鼠标点击和分页结果刷新之间可能有 0.1 秒的延迟；但是，在 Chrome (24.0.1312.57 m) 中，延迟是明显的 1-2 秒。

昨晚我花了大部分时间在我的代码上倾注，看看我是否能在编写这个测试之前找到原因。这是赤裸裸的，仍然存在问题。

我只能假设 Chrome 正在处理 element.style.display='';不良。没有它（甚至循环遍历 5,000 个元素以显示='none'），事情就会变得活泼。

有什么想法吗？客户希望对大约 4,000 - 7,500 的结果集进行分页，但不希望重新加载页面，并且不明白他们应该应用过滤器将该列表缩减到

最后的手段是 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++;
    });


}

Answer 1

检查一下

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();
}

http://jsfiddle.net/Hwqb3/16/