JSONコールバックのHTMLデータを300以上のDIVに効率的に取り込む方法は？

Question

私は、約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を：私は2つの.html()呼び出しをコメントアウトした場合

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

、実行時間は約110msに低下するので、これらは明らかに犯人です。そして、HTMLコンテンツは最大で300バイトのデータではありません。

アドバイスはありますか？

EDIT：DIVを作成するコードを追加しました。おそらく、私はgetJSONコールバック内でそれを動かすことができ、HTMLが作成されたときにドロップすることができますか？助けてくれますか？

Answer 1

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

Answer 2

小さな遅延値を持つsetTimeoutデバイスで、これらのグループをまとめて作成するといいでしょう。それは処理です。したがって、知覚される始動速度はより速い。 AJAXスピナーなどを読み込んでいるときにスイッチをオンにして、レンダリング中にユーザーがすぐにやり取りできるようにすることができます。

Answer 3

それは実際のマークアップを見ることなく伝えるのは難しいですが、おそらくのようなものになるはずです：

JSのすべてを構築

$.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); 
}); 

を、一度だけDOMに挿入すると、ここに行くための方法ですが、それ実際のマークアップに基づいて構築する必要があります。上の例は、それを行う方法の一般的な例です。