3

約 300 個の DIV に HTML データを入力しているため、完了するのに 18 秒かかるスクリプトがあります。以下のコード:

HTML:

    <div id="window">
        <div id="wall">
            <div class="module">
                <div>
                    <div class="face front"></div>
                    <div class="face back"></div>
                </div>
            </div>
        </div>
    </div>

Javascript:

for (i = 0; i < numModules-1; ++ i)
{
    var $mod = $('.module:eq(0)').clone();

    modLeft += modSize;
    if (modLeft + modSize > $('#wall').width())
    {
        modLeft = 0;
        modTop += modSize;
    }
    $mod.css({
        left: modLeft,
        top: modTop
    }).appendTo('#wall');
}

$.getJSON('html_server.php?callback=?', function(data) {
    var htmlCount = data.length;

    for (i = 0; i < numModules /* 300 or more */; ++ i)
    {
        var pick = Math.floor(Math.random() * Math.floor(htmlCount/2)) * 2;
        var contentFront = data[pick];
        var contentBack = data[pick+1];
        var modStyle = '';
        var $mod = $('.module:eq(' + i + ')');
        var $modFront = $mod.find('.front');
        var $modBack = $mod.find('.back');

        // Set HTML content on front & back of module
        $modFront.html(contentFront);
        $modBack.html(contentBack);
    }
});

2 つの呼び出しをコメント アウトする.html()と、実行時間が約 110 ミリ秒に低下するため、これらが原因であることは明らかです。HTML コンテンツは大量ではなく、せいぜい 300 バイトのデータです。

何かアドバイス？

編集: DIV を作成するコードを追加しました。おそらく、それを getJSON コールバック内に移動して、作成された HTML にドロップすることはできますか? それは役に立ちますか？

4

3 に答える 3

2

実際のマークアップを見ないとわかりにくいですが、おそらく次のようになります。

$.getJSON('html_server.php?callback=?', function(data) {
    var mod='';
    for (i = 0; i < numModules /* 300 or more */; ++ i) {
        var pick = Math.floor(Math.random() * Math.floor(data.length/2)) * 2;
            mod += '<div class="module'>;
            mod += '<div class="front">'+data[pick]+'</div>');
            mod += '<div class="back">'+data[pick+1]+'</div>');
            mod += '</div>';
    }
    $('#someParent').html(mod);
});

すべてを JS で構築し、DOM に 1 回だけ挿入するのがここでの方法ですが、実際のマークアップに従って構築する必要があります。上記はその方法の一般的な例です。

于 2012-04-11T17:58:42.710 に答える
2

テンプレートとして作成moduleし、コンテンツをレスポンスに置き換えました。また、html ロジックを JSON の下に移動して、一度実行できるようにしました。下記参照、

 var modTmpl = '<div class="module"><div><div class="face front">{CONTENT_FRONT}</div><div class="face back">{CONTENT_BACK}</div></div></div>';

$.getJSON('html_server.php?callback=?', function(data) {
    var htmlCount = data.length;

    var pick, tmp, $mods = [];
    for (i = 0; i < numModules /* 300 or more */; ++ i)
    {
        pick = Math.floor(Math.random() * Math.floor(htmlCount/2)) * 2;
        tmp = modTmpl
                .replace(/{CONTENT_FRONT}/, data[pick])
                .replace(/{CONTENT_BACK}/, data[pick+1]);
        $mods.push(tmp);
    }
});

/*
    I am leaving the below code untouched as it seems like you are 
    positioning each module. If not then you can just 
    $('#wall').append($mods.join('')); and remove below for loop
*/
for (i = 0; i < numModules-1; ++ i)
{
    var $mod = $mods[i]; //use the pushed modules and append now

    modLeft += modSize;
    if (modLeft + modSize > $('#wall').width())
    {
        modLeft = 0;
        modTop += modSize;
    }
    $mod.css({
        left: modLeft,
        top: modTop
    }).appendTo('#wall');
}
于 2012-04-11T18:24:07.140 に答える
-1

遅延値が小さいデバイスで一度に（たとえば20のグループで）これらをまとめて作成しますsetTimeout。完了するのが速くなることはないかもしれませんが、処理中にブラウザーがロックアウトされることはありません。したがって、知覚される起動速度はより速くなる可能性があります。読み込み中にAJAXスピナーなどをオンにして、レンダリング中にユーザーがすぐに操作できるようにすることができます。

于 2012-04-11T17:47:36.527 に答える