admin管理员组文章数量:1319471
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);
}
Share
Improve this question
edited Nov 25, 2010 at 1:22
karim79
343k67 gold badges419 silver badges407 bronze badges
asked Nov 25, 2010 at 1:04
Click AheadClick Ahead
2,8526 gold badges36 silver badges64 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
4 Answers
Reset to default 5var 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
版权声明:本文标题:javascript - JQuery - Fastest possible way of appending list items to list - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742061131a2418592.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论