Question

我有一个脚本需要18秒才能完成，因为它使用HTML数据填充了大约300个DIV。代码如下：

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

如果我注释掉两个.html()来电，运行时间下降到大约110毫秒，那么这些显然是罪魁祸首。并且HTML内容不是很多，最多可能是300字节的数据。

有什么建议吗？

编辑：添加了创建DIV的代码。也许我可以在getJSON回调中移动它，只是在创建它时放入HTML？那会有帮助吗？

Answer 1

在没有看到实际标记的情况下很难分辨，但应该看起来像：

$.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是这里的方法，但它必须根据实际标记构建，上面只是一个如何做的通用示例。

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

Answer 3

我会在setTimeout设备上一次创建一堆（比如20组），延迟值很小 - 它可能没有任何快速完成，但它不会锁定浏览器正在处理中。因此，感知的启动速度可能更快。您可以在加载时打开AJAX微调器或类似工具 - 并允许您的用户在渲染时立即进行交互。

使用来自JSON回调的HTML数据填充300多个DIV的有效方法？

3 个答案: