Fast way to append large list to dom

Question

I am trying to populate an empty list using an array of photo names. I have made this work already, but with a large amount of photos it can become relatively slow. More than 500 photos is not unusual.

I am wondering if someone could find a way to make this code work faster, or tell me what make this code run slow so I can have another look at it myself.

The code I have is as follows. this.photoListElement is a jQuery object referring to the unordered list element. photoNames is an array of photo name strings. Variables are declared at the top of the function which is not shown here. isThumbDownloaded checks a variable in an object. getThumb and getThumbId are functions which add some strings together.

(...)
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(''));
(...)

Help is very much appreciated.

After research

The problem is not the loop, although some minor optimizations can be done, but the the dom insertion.

I'm not using strict mode in this function. Would that make a difference at all? — Aart Stuurman, Jul 02 '13 at 12:13
Loading 500 image files just is slow. Do you really think you need to do this? — Bergi, Jul 02 '13 at 12:17
What is `coverages.isThumbDownloaded` supposed to do if you're using a cachebuster right after it? — Bergi, Jul 02 '13 at 12:19
Does the code complete fairly quickly, and it's just the images that are slow to be loaded and rendered? — MrCode, Jul 02 '13 at 12:19
@Bergi I'm at a point where I don't want to change the way I load photos anymore. At the moment it takes about 300-500ms, which is not that bad, but I wanted to see if I can speed it up. — Aart Stuurman, Jul 02 '13 at 12:21
@Bergi I don't know what you mean by cachebuster. Could you explain? — Aart Stuurman, Jul 02 '13 at 12:22
@Bergi I have checked, and the loop itself runs fairly fast(30ms for 500 photos). The join is also fast. The problem is with the appending I guess. — Aart Stuurman, Jul 02 '13 at 12:31
It sounds like the whole code completes quickly, and the browser is just slow at requesting and rendering 500 images. If you think the div concatenation is the problem, try building the DOM element using `document.createElement('div')` and work with the object instead of building raw HTML. That should be faster but it could only be slightly. — MrCode, Jul 02 '13 at 12:35
So you would recommend creating each photo div seperately, and append them all seperately too? — Aart Stuurman, Jul 02 '13 at 12:37

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

In the loop you are counting the number of photoNames on each iteration:

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

Keep the length in a variable instead and the loop will be faster:

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

Also, string concatenation might be faster than array join, check this jsperf .

So:

place = "";

...

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

..

this.photoListElement.html(place);

edited May 23 '17 at 12:28

Community

1
1

answered Jul 02 '13 at 12:16

Emil A.

3,387
4
29
46

I always thought that was a variable stored somewhere. I'll give it a go. – Aart Stuurman Jul 02 '13 at 12:18
2

This is not a bad answer per se, but this has been optimized in modern browsers – nicosantangelo Jul 02 '13 at 12:18
Could it be that this actually makes it slower? My measurements give me 500ms for this and 350 with my own script. – Aart Stuurman Jul 02 '13 at 12:27
Why would the concatenation be faster? I also just figured out the loop is fairly fast. It's the appending that is slow. – Aart Stuurman Jul 02 '13 at 12:32
concatenation might be faster because of browser string optimizations – Emil A. Jul 02 '13 at 12:34
Alright, thank you. I am accepting this answer because it answered my question, although the performance issue was actually not the loop, but the dom insertion. – Aart Stuurman Jul 02 '13 at 12:47

score 0 · Answer 2 · answered Jul 02 '13 at 12:19

0

Try using

$('ul').append(ilen);

answered Jul 02 '13 at 12:19

WinHtaikAung

414
2
11

I think so coz our country connection is slow so there is nothing special – WinHtaikAung Jul 02 '13 at 12:35

Fast way to append large list to dom

2 Answers2