Присоединение к домену внутри каждой итерации или создание массива и вывод?

Question

Я вчера отправил вопрос , касающийся анализа данных 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

Но я делаю это правильно? Я немного новичок и просто хочу убедиться, что подхожу к этому правильно. Спасибо за любой совет!

Answer 1

Вы все еще делаете это неправильно. Дело в том, что вы не хотите изменять DOM в цикле, потому что он очень медленный. Вы добавляли элементы в массив, поэтому вы можете просто добавить их все в один вызов функции:

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

Answer 2

В большинстве браузеров добавление одной большой строки HTML будет быстрее, чем выполнение нескольких небольших добавлений. Таким образом

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

Должен дать лучшие результаты, чем

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

(Очевидно, это различие является значительным, только если вы добавляете большое количество элементов)

Answer 3

вам не нужно повторять для вывода.

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

В противном случае выглядит хорошо