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米）中，延迟时间是明显的1-2秒。

我昨晚的大部分时间都花在我的代码上，看看我是否能在写这个测试之前找到原因。这是骨头，但仍有问题。

我只能假设Chrome正在处理element.style.display ='';糟糕。没有它（甚至循环遍历5,000个元素以显示='无'），事情是活泼的。

有什么想法吗？客户希望对大约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/

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

1 个答案: