Быстрый способ добавления большого списка в dom

Я пытаюсь заполнить пустой список, используя массив имен фотографий. Я уже сделал эту работу, но с большим количеством фотографий она может стать относительно медленной. Более 500 фотографий не являются чем-то необычным.Быстрый способ добавления большого списка в dom

Мне интересно, может ли кто-нибудь найти способ сделать этот код более быстрым или рассказать мне, что заставляет этот код работать медленно, поэтому я могу еще раз взглянуть на него.

Код у меня следующий. this.photoListElement - это объект jQuery, ссылающийся на элемент неупорядоченного списка. photoNames - это массив строк имен фотографий. Переменные объявляются в верхней части функции, которая здесь не показана. isThumbDownloaded проверяет переменную в объекте. getThumb и getThumbId - это функции, которые добавляют некоторые строки вместе.

(...) 
place = []; 
for(i=0; i< photoNames.length; ++i) { 
    photoName = photoNames[i]; 
    if(coverages.isThumbDownloaded(coverageId, photoName)){ // A function which checks if a photo is downloaded. If it is, the photo should not be hidden, and the right background should be applied. 
     bg = 'background-image:url(\''+coverages.getThumb(coverageId, photoName) + '?' + new Date().getTime()+'\');'; 
     cls = ''; 
    } else { 
     bg = ''; 
     cls = 'hidden'; 
    } 
    place[i] = '<div id="'+ this.getThumbId(photoName) +'" photoName="'+photoName+'" style="'+bg+'" class="phoPhoto '+cls+'" onclick="$.mobile.changePage($(\'#carousel\'), {transition: \'slidefade\'})"></div>'; 
} 
this.photoListElement.html(place.join('')); 
(...)

Справка очень ценится.

После исследования

Проблемы не цикл, хотя некоторые незначительные оптимизации могут быть сделаны, но, как вставка дома.

источник

2013-07-02 Aart Stuurman

Я не использую строгий режим в этой функции. Будет ли это иметь значение вообще? –

Загрузка 500 файлов изображений происходит медленно. Вы действительно думаете, что вам нужно это сделать? – Bergi

Что означает 'coverages.isThumbDownloaded', если вы используете кешьюстер сразу после него? – Bergi

В цикле вы подсчет количества photoNames на каждой итерации:

for(i=0; i< photoNames.length; ++i)

Keep длину в переменной, а и цикл будет быстрее:

for (var i = 0, ilen = photoNames.length; i < ilen; i += 1)

Кроме того, объединение строк может быть быстрее, чем объединение массива, проверьте это jsperf.

Итак:.

place = "";

...

place += '<div>.......';

this.photoListElement.html(place);

источник

2013-07-02 12:16:47

Я всегда думал, что где-то хранилась переменная. Я отдам его. –

Это не плохой ответ как таковой, но это было оптимизировано в современных браузерах. – NicoSantangelo

Неужели это действительно замедляет работу? Мои измерения дают мне 500 мс для этого и 350 с моим собственным сценарием. –

Попробуйте использовать

$ ('уль') присоединять (ILEN);

источник

2013-07-02 12:19:22 WinHtaikAung

Зачем это быстрее? –

Я так думаю, что наша связь в стране медленная, поэтому нет ничего особенного – WinHtaikAung

Быстрый способ добавления большого списка в dom

ответ

Смежные вопросы