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

Posted 2023-05-09

【中文标题】在每次迭代中附加到 dom 或创建一个数组并输出？

【英文标题】：Appending to the dom inside each iteration or create an array and output?

【发布时间】：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

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

【参考方案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 数组的内容。 ;-)