Question

我正在使用无限滚动的网站。有一个名为is_element_in_view()的函数可以在这3个事件上执行：

scroll
load
resize

该函数完全执行它所调用的函数，它会检查带有加载gif图像的元素是否在视图中，如果是，则触发ajax请求以从服务器获取内容。

服务器发回一个如下所示的json对象：

    [{
        "url": "\/embed\/182926\/some-slug",
        "thumb": "http:\/\/cdn.site.com\/91\/26\/a62c1ad74327321dab78bb194c130da5.jpg",
        "type": "video",
        "is_original": false,
        "is_prank_news": false,
        "title": "Hello World",
        "description": "\t<p>Enjoy this video!<\/p>",
        "teaser": "Click Me!",
        "finder": "Found by <strong>Jim<\/strong> yesterday",
        "likes": "2 likes",
        "ad_img": null,
        "media_stats": "<div class=\"media-status\">2000 views<\/div>"
    },
    more objects...]

为了清楚起见，这个响应中只有一个对象，但实际上我回来了20.这就是我如何从json数据中构建html：

$.ajax({
    url: '/some/ajax/url',
    type: 'get',
    data: 'somedata',
    dataType: 'json',
    success: function(response) {

        if(!$.isEmptyObject(response)) {

            for(var i = 0; i < response.length; i++) {

                if(response[i]) {
                    var item = response[i];
                    var title = item.title.replace(/\\"/g, '"');

                    var media_label = '';                   
                    var item_description_teaser = '';
                    var likes = '';
                    var ad_image = '';
                    var media_stats = '';

                    if(item.description) {

                        // description
                        item_description_teaser = '<div class="description">' + item.description.replace(/\\"/g, '"');

                        // teaser
                        item_description_teaser += (item.teaser) ? '<a href="'+ item.url +'" class="teaser">'+ item.teaser.replace(/\\"/g, '"') +'<img src="images/teaser-arrow.png" alt="" /></a></div>' : '</div>';
                    }

                    // media label
                    if(item.type == 'article' && item.is_prank_news || item.is_original && item.is_prank_news) {
                        media_label = '<span class="media-label prank-news-network">Prank</span>';
                    }
                    else {
                        if(item.type == 'article') {
                            media_label = '<span class="media-label article">Article</span>';
                        }
                        else if(item.is_original) {
                            media_label = '<span class="media-label original">Original</span>';
                        }
                    }

                    // likes
                    if(!settings.hide_likes) {
                        likes = '<span class="likes">' + item.likes + '</span> | ';
                    }

                    // ad image
                    if(item.ad_img) {
                        ad_image = '<img src="'+ item.ad_img +'" alt="" class="ad-img" />';
                    }

                    block += '<article class="block">' +
                                '<div class="inner-left">' +
                                    media_label +
                                    '<a href="'+ item.url +'" title="" class="thumb">' +
                                        '<img src="'+ item.thumb +'" alt="" width="198" height="111" />' +
                                    '</a>' +
                                '</div>' +
                                '<div class="inner-right">' +
                                    '<a href="'+ item.url +'" title="" class="title">' +
                                        title +
                                    '</a>' +
                                    item_description_teaser.replace(/\\"/g, '"') +
                                    '<div class="media-stats">' +
                                        likes +
                                        '<span class="finder">'+ item.finder.replace(/\\"/g, '"') +'</span>' +
                                    '</div>' +
                                    ad_image +
                                '</div>' +
                                item.media_stats +
                            '</article>';

                }
            }

            $('#content').append('<div class="page page-'+ page_num +'">' + block + '</div>');

            // update page count
            page_num++;

            // clear previous listings
            block = '';
        }
        else {
            $('#content').append('<div class="page page-1"><p class="nothing-to-show">Nothing found...</p></div>');
        }
    },
    error: function() {
        alert('error');
    }
});

正如您所看到的，我将所有内容都放在变量block中存储的一个巨大字符串中。我在每个循环中将数据附加到此字符串，并将其附加到循环外部的页面。

我觉得有一种更快的方法可以从js构建html。我刚才读到某个地方，像我正在做的那样构建巨型字符串的效率不如我忘记的文章所描述的其他方法。那么更快的方法是什么？

Answer 1

将块存储在数组中，如blocks，然后

$('#content').append(blocks.join(""));

编辑：这不是OP想要的。我想问题是每次触发事件时附加内容。

我要创建一个DocumentFragment，将新内容添加到其中，然后附加到$("#content")。很遗憾，DocumentFragment不支持innerHTML。

因此，创建一个虚拟元素，填充它然后将其子节点放入容器中：

var dummy = $("<div>").html(block), content = $("#content");
$.each(dummy.children(), function(i, c) {content.append(c);});

Answer 2

您可以让服务器返回已在HTML中标记的值，然后：

$('#content').append( response );

然后，您可以处理所有循环和过滤服务器端，减少文档中的JS数量。

Answer 3

向DOM添加html元素代表了很大的性能损失，因此最好创建一个大字符串并将其追加到最后，post解释得非常好

对于大多数用途，创建一个非常长的字符串并在最后添加它的方法将是最佳选择，因为它可以充分利用代码易读性，编程的简易性和速度。

从JavaScript构建HTML的最快方法是什么？

3 个答案: