在每次迭代中附加到 dom 或创建一个数组并输出？答案

【问题标题】：Appending to the dom inside each iteration or create an array and output?在每次迭代中附加到 dom 或创建一个数组并输出？
【发布时间】：2010-11-17 05:59:47
【问题描述】：

我发布了a question yesterday 处理解析 json 数据。在一个后续回答中，有人说我在每次迭代中使用 jQuery append() 函数时性能受到了影响，同时使用 each()。

我在做：

$.getJSON("http://myurl.com/json?callback=?", 
  function(data) {        

  // loop through each post 
  $.each(data.posts, function(i,posts){ 

    ... parsing ...

    // append
    $('ul').append('<li>...</li>');

  }); 

 });

我修改成这样：

$.getJSON("http://myurl.com/json?callback=?", 
  function(data) { 

     // create array
     arrPosts = new Array(); 

      // loop through each post
      $.each(data.posts, function(i,posts){ 

       ... parsing ...

        arrPosts[i] = '<li> ... </li>'; 

      });           

      // output
      for (i=0;i<arrPosts.length;i++){ 
        $('ul').append(arrPosts[i]); 
      } 

  });

这似乎工作正常，示例演示：http://jsbin.com/isuro

但是我这样做对吗？我有点像菜鸟，只是想确保我正确地处理了这个问题。感谢您的建议！

【问题讨论】：

标签： javascript jquery arrays json dom

【解决方案1】：

你还是做错了。关键是您不想在循环中修改 DOM，因为它太慢了。您正在将项目添加到数组中，因此您可以在一个函数调用中添加所有项目：

$('ul').append(arrPosts.join(''));

【讨论】：

【解决方案2】：

在大多数浏览器中，追加一个大的 HTML 字符串比执行多个小的追加要快。因此

 $('ul').append( arrPosts.join( "\n" ) );

应该比

产生更好的结果

  for (i=0;i<arrPosts.length;i++){ 
    $('ul').append(arrPosts[i]); 
  }

（显然，这种差异只有在添加大量元素时才显着）

【讨论】：

【解决方案3】：

您不必迭代输出。

$('ul').append( arrPosts.join( "\n" ) );

否则看起来不错

【讨论】：

完美运行。我显然需要阅读有关使用 javascript 数组的内容。 ;-)