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

我在一个使用无限滚动的网站上工作。有一个名为

is\u element\u 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...]

[{
“url”：“\/embed\/182926\/一些slug”，
“拇指”：“http:\/\/cdn.site.com\/91\/26\/a62c1ad74327321dab78bb194c130da5.jpg”，
“类型”：“视频”，
“is_original”：假，
“是恶作剧新闻”：错，
“标题”：“你好，世界”，
“描述”：“\t欣赏这段视频！”，
“挑逗者”：“点击我！”，
“发现者”：“昨天被吉姆发现”，
“喜欢”：“2喜欢”，
“ad_img”：空，
“媒体统计数据”：“2000次浏览”
},
更多对象…]

为了清晰起见，这个回答中只有一个对象，但实际上我得到了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');
    }
});

$.ajax({
url:“/some/ajax/url”，
键入：“get”，
数据：“somedata”，
数据类型：“json”，
成功：功能（响应）{
如果（！$.isEmptyObject（响应））{
对于（变量i=0；i未找到任何内容…”；
}
},
错误：函数（）{
警报（“错误”）；
}
});

如您所见，我将所有内容放在一个巨大的字符串中，该字符串存储在变量

块中。我在每个循环中将数据附加到此字符串，并将其附加到循环末尾外部的页面

我觉得有一种更快的方法可以从js构建html。我不久前在某个地方读到，像我现在这样构建巨型字符串并不像文章中描述的我忘记的其他方法那样有效。那么什么是更快的方法呢？
将块存储在数组中，比如说
块
，然后

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

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

我想创建一个
DocumentFragment
，将新内容放入其中，然后附加到
$（“#内容”）
。不幸的是，
DocumentFragment
s不支持
innerHTML

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

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

var dummy=$（“”）.html（块），content=$（“#content”）；
$.each（dummy.children（），函数（i，c）{content.append（c）；}）；
您可以让服务器返回已在HTML中标记的值，然后：

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

然后，您可以处理服务器端的所有循环和过滤，减少文档中的JS量。
将html元素添加到DOM中会带来很大的性能损失，因此最好创建一个大字符串并在最后附加它，这就很好地解释了这一点

对于您的大多数使用，创建一个真正长的字符串并在末尾追加它的方法将是最佳选择，因为它充分利用了代码易读性、编程容易性和速度之间的权衡

为什么不在每次循环迭代时追加？保持字符串大小适中。构建一个大字符串，然后将其分配给dom元素的
.innerHTML
属性。您可以通过单独的createElement（）调用来构建它，但对于“复杂”的html来说，这是非常痛苦的。如果JakeRow使用jQuery，最好使用
.html（）
来防止内存泄漏。@MaxArt我不能使用.html（），因为我需要附加每个结果