javascript - Chrome 中的 DOM 操作速度很慢(隐藏/显示元素)

Question

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

对 SO 的快速搜索表明，如果设置了背景大小，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 的结果集进行分页，但不希望页面重新加载，并且不明白他们应该应用过滤器将该列表削减到 <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++;
    });


}

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/