將大列表添加到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('')); 
(...)

幫助非常感謝。

研究

問題後不循環，但也有一些不重要的優化可以做，但DOM的插入。

來源

2013-07-02 Aart Stuurman

我在這個函數中沒有使用嚴格模式。這會有所作爲嗎？ –

加載500個圖像文件很慢。你真的認爲你需要這樣做嗎？ – Bergi

'coverages.isThumbDownloaded'應該在你使用緩存後立即執行什麼？ – Bergi

在您每次迭代計算photoNames數量的循環：

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

保持長度的變量，而不是循環將更快：

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毫米。 –

嘗試使用

$（ 'UL'）追加（艾朗）;

來源

2013-07-02 12:19:22 WinHtaikAung

爲什麼這會更快？ –

我覺得我們國家的聯繫很慢，所以沒有什麼特別的 – WinHtaikAung

將大列表添加到dom的快速方法

回答

相關問題