javascript - JQuery - Fastest possible way of appending list items to list - Stack Overflow

admin管理员组

文章数量:1325150

I have some jquery that works fine, but I'd like to highly optimize it. Basically I'm doing standard appending list items to unordered lists. Can anyone remend the fastest way to optimise the following code e.g. createDocumentFragment ?

for (key in data) {
     li = $('<li><span class="item">' + data[key]["Name"] + '</span><img src=' +   options.deleteIcon + ' alt="remove" class="delete"/></li>');
     $('.item', li).data('ID', data[key]["Id"]);
     $(list).append(li);
}

I have some jquery that works fine, but I'd like to highly optimize it. Basically I'm doing standard appending list items to unordered lists. Can anyone remend the fastest way to optimise the following code e.g. createDocumentFragment ?

for (key in data) {
     li = $('<li><span class="item">' + data[key]["Name"] + '</span><img src=' +   options.deleteIcon + ' alt="remove" class="delete"/></li>');
     $('.item', li).data('ID', data[key]["Id"]);
     $(list).append(li);
}

• javascript
• jquery
• optimization

Share Improve this question Follow edited Nov 25, 2010 at 1:22 karim79 343k6767 gold badges419419 silver badges407407 bronze badges asked Nov 25, 2010 at 1:04 Click AheadClick Ahead 2,85266 gold badges3636 silver badges6464 bronze badges 3

• According to the description, 'list' is an unordered list (ul) DOM element. – Chris Hutchinson Commented Nov 25, 2010 at 1:16
• @Chris - but is it just created, as part of this operation...or already in the DOM? – Nick Craver Commented Nov 25, 2010 at 1:16
• Because I had nothing better to do (...that I wanted to do, anyway...) I figured I'd put together a simple parison of creating elements and appendTo() (slightly different to your own approach). This suggests that creating elements with $(document.createElement('li')) is consistently faster than using the jQuery method of $('<li></li>'). Whether this is transferable to your own use is another matter entirely, of course. Demo at JS Fiddle. – David Thomas Commented Nov 25, 2010 at 1:52

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

var sb = new Array();

for (key in data) {
   sb.push('<li><span class="item" id="', data[key]['Id'], '">', data[key]["Name"], '</span><img src=', options.deleteIcon, ' alt="remove" class="delete"/></li>')}

$(list).append(sb.join(""));

I would suggest reducing the number of writes to the DOM to just one. By that, I mean storing the list into a temporary variable and then appending the entire list in a single operation. Also, instead of using .attr to set the ID of each element, you can use concatenation as you have used it to set the text of each LI.

var tmpList = '';
for (key in data) {
     li = '<li><span class="item" id="' + data[key]['Id'] + '">' + data[key]["Name"] + '</span><img src=' +   options.deleteIcon + ' alt="remove" class="delete"/></li>';
     tmpList += li;
}

// if you are appending to an existing list, use append
// if you have just built one up from scratch, just use `.html`
$(list).append(tmpList);

I would remend reading this:

Optimizing JavaScript For Execution Speed

From the article:

Unlike other programming languages, JavaScript manipulates web pages through a relatively sluggish API, the DOM. Interacting with the DOM is almost always more expensive than straight putations. After choosing the right algorithm and data structure and refactoring, your next consideration should be minimizing DOM interaction and I/O operations.

For a start, you could make one large chunk of li elements and then append them in a single operation instead of appending them one at time.

Thanks everyone, the one point everyone seems to miss is that I'm associating the Id with the DOM element ... using the jquery.data method. This isn't to be confused the the ID attribute for the span element. Because of this I'm not sure how the concatenation would work as I understand that I need to have a reference to the DOM element to set the data on it. Is this correct?

本文标签： javascriptJQueryFastest possible way of appending list items to listStack Overflow