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

我正在使用无限滚动的网站上工作。有一个名为is_element_in_view()功能得到这3个事件的执行：什么是从JavaScript构建HTML的最快方式？

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。我前一段时间在某处读到，像我这样做的巨型琴弦并不像文章中描述的其他方法那样高效，我忘记了。那么做这件事的最快方法是什么？

来源

2012-07-11 TK123

为什么不在每个循环迭代处追加？保持琴弦适中大小。 – TheZ 2012-07-11 19:33:01

构建一个巨大的字符串，然后将其分配给一个dom元素的'.innerHTML'属性。你可以通过个别的createElement（）调用来构建它，但这对'复杂'的html非常痛苦。 – 2012-07-11 19:34:06

如果JakeRow使用jQuery，最好使用'。html（）'以防止内存泄漏。 – MaxArt 2012-07-11 19:34:57

添加HTML元素的DOM代表一个大的性能损失，所以最好是建立一个大的字符串，并在末尾添加它，这post说明它真的很好

对于大多数的用途而言，创建一个非常长的字符串并将其附加到最后的方法将是最好的选择，因为它最大限度地利用了代码易读性，易编程性和速度的优势。

来源

2012-07-11 19:51:51 jorgehmv

优秀的链接。这篇文章非常讨论我需要知道的内容。 – TK123 2012-07-11 19:55:55

存放在阵列中的块说blocks，然后

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

编辑：这不是什么OP通缉。我想这个问题是在每次触发事件时附加的东西。

我想说创建一个DocumentFragment，把新的东西，然后追加到$("#content")。不幸的是，DocumentFragment s不支持innerHTML。

因此，创建一个虚设的元素，填充它，然后把它的子节点到container：

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

来源

2012-07-11 19:33:55 MaxArt

你可以有你的服务器返回的值已标记，在HTML中，则：

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

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

来源

2012-07-11 19:46:11 honyovk

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

回答

相关问题