Question

我正在尝试使用照片名称数组填充空列表。我已经完成了这项工作，但是如果有大量的照片，它会变得相对较慢。超过500张照片并不罕见。

我想知道是否有人能找到一种方法让这段代码更快地运行，或者告诉我是什么让这段代码运行缓慢所以我可以自己再看看它。

我的代码如下。 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插入。

Answer 1

在循环中，您计算每次迭代的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);

Answer 2

尝试使用

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

快速将大型列表附加到dom的方法

2 个答案: