2

今朝、 http：//jsfiddle.net/Hwqb3/3/で小さなテストをまとめました。これは、ページ付けを伴うより大きなプロジェクトの裏側にあります。私はネイティブJSとjQueryでこれを試しました。テストではjQueryを使用します。

SOをすばやく検索すると、background-sizeが設定されていると、Chromeの処理が不十分であることがわかりますが、ここではそうではありません。ソースにbackground-sizeの痕跡はなく、要素を調べると、background-sizeが設定/継承されていないことがわかります。

5,000個の要素がリストに追加されている間は、最初のページの読み込みを無視してください。ほんの数秒ですが、テストする要素がいくつかあります。

Firefox 18.0.1では、ページ間の移動はほぼ瞬時に行われ、IE9では、マウスをクリックしてからページ結果が更新されるまでに0.1秒の遅延が発生する可能性があります。ただし、Chrome（24.0.1312.57 m）では、遅延は1〜2秒で顕著です。

このテストを作成する前に、昨夜の夜の大半をコードに注いで、原因を見つけることができるかどうかを確認しました。これは骨の折れる作業であり、まだ問題があります。

Chromeがelement.style.display=''を処理しているとしか想定できません。不完全に。それがなければ（5,000個の要素をループしてdisplay ='none'にすることさえ）、物事はきびきびとしています。

何か案は？クライアントは、約4,000〜7,500の結果セットのページ付けを望んでいますが、ページの再読み込みを望んでおらず、200を超えるページに移動することはないため、フィルターを適用してリストを100未満に絞り込む必要があることを理解していません。特定の何かを探している375ページ。

最後の手段はAJAX呼び出しです。これは、Chromeでは少し速いかもしれません。まだテストされていません。

前もって感謝します。

jQueryCDNリンクを除くjsfiddleからのコード

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


}
4

1 に答える 1

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/

于 2013-02-05T10:15:37.667 に答える