Geek asks and answers

Efficient way to populate 300 + DIV with HTML data from a JSON callback?

I have a script that lasts 18 seconds because it fills in about 300 DIVs with HTML data. Code below:

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

If I comment on two calls .html(), the execution time will be reduced to about 110 ms, so they are clearly the culprits. And the HTML content is not a ton, and maybe not more than 300 bytes of data.

Any tips?

EDIT: Added code that creates a DIV. Perhaps I could move this in the getJSON callback and just drop the HTML as they were created? Will this help?

+3
source share
3 answers

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

+2

(, 20) setTimeout - , . . AJAX- , , .

0

More articles:


All Articles