问题描述
好吧，我正在当前项目中重写一些普通的JS函数，现在我正在为工具提示等生成大量HTML.
Ok, I'm rewriting some vanilla JS functions in my current project, and I'm at a point where there's a lot of HTML being generated for tooltips etc.
我的问题是，这样做是否更好/更可取?
My question is, is it better/preferred to do this:
var html = '<div><span>Some More Stuff</span></div>';
if (someCondition) {
html += '<div>Some Conditional Content</div>';
}
$('#parent').append(html);
OR
var html = $('<div/>').append($('<span/>').append('Some More Stuff'));
if (someCondition) {
html.append($('<div/>').append('Some conditionalContent');
}
$('#parent').append(html);
?
推荐答案
从性能的角度来看:这取决于.
在您的简短示例中，附加文本更快，因为实际上直到最后才创建任何DOM元素.但是，如果您在 lot 中执行此操作，则字符串连接的增加时间与缓存的文档片段的性能之和就会加起来.
In your short example, it's faster to append the text, since you actually aren't creating any DOM elements until the end. However if you were doing this a lot, then the added time of string concatenation vs the performance of cached document fragments adds up.
当您执行$(html)时，jQuery会将其缓存为文档片段(提供了字符串)小于或等于512个字节)，但是如果仅缓存$("<div />")并不会带来太大的收益...但是，如果您进行数千次缓存，则会产生可衡量的影响，因为字符串连接的开销会比字符串高变得更长，缓存的文档碎片成本相当稳定.
When you do $(html) jQuery caches it as a document fragment (provided the string is 512 bytes or less), though there's not much gain if you're caching just $("<div />")...however if you're doing it thousands of times, there is a measurable impact, as string concatenation gets more expensive as your string gets longer, the cached document fragment cost is pretty steady.
更新:以下是一些简单的示例，了解我的意思，请使用firebug在此处获取控制台时间:
Update: Here's some quick examples to see what I mean, use firebug to get the console times here:
您可以自己运行它: http://jsfiddle.net/Ps5ja/
console.time('concat');
var html = "";
for(var i = 0; i < 500; i++) {
html += '<div><span>Some More Stuff</span></div>';
html += '<div>Some Conditional Content</div>';
}
var elem = $(html);
console.timeEnd('concat'); //25ms
console.time('DOM');
var parent = $("<div />")
for(var j = 0; j < 500; j++) {
parent.append($('<div/>').append($('<span/>', {text :'Some More Stuff'})));
parent.append($('<div/>',{ text: 'Some conditionalContent' }));
}
console.timeEnd('DOM'); //149ms
console.time('concat caching');
var html = "";
for(var i = 0; i < 5000; i++)
html += '<div><span>Some More Stuff</span></div><div>Some Conditional Content</div>';
var elem = $(html);
console.timeEnd('concat caching'); //282ms
console.time('DOM caching');
var parent = $("<div />")
for(var j = 0; j < 5000; j++)
parent.append('<div><span>Some More Stuff</span></div><div>Some Conditional Content</div>');
console.timeEnd('DOM caching'); //157ms
注意:字符串测试中的var elem = $(html);是这样，所以我们最终创建了相同的DOM元素，否则，您将字符串串联与实际DOM创建进行了比较，这几乎是不公平的，并且也不是那么有用: )
Note: the var elem = $(html); in the string test is so we end up creating the same DOM elements, otherwise you're comparing string concatenation to actual DOM creation, hardly a fair comparison, and not really useful either :)
从上面可以看到，由于缓存的片段越复杂，缓存影响越大.在第一个测试中，这是您的示例，但没有清除条件，在此测试中，DOM丢失了，因为正在进行许多小操作(在我的机器上，但是您的比率应该大致相同): HTML联系人:25毫秒， DOM操作:149毫秒.
You can see by the above, as the cached fragment is more complex, the more caching makes an impact. In the first test, which is your example without the condition cleaned up a bit, DOM loses because there are lots of little operations going on, in this test (on my machine, but your ratios should be about the same): HTML Contact: 25ms, DOM Manipulation: 149ms.
但是，如果您可以缓存复杂的片段，则可以避免重复创建那些DOM元素，而只是克隆它们而获得的好处.在第二个测试中，DOM胜出，因为HTML方法创建了DOM元素集合 5000次，而第二个缓存的方法仅创建了一次，并克隆了5000次.在此测试中: HTML Concat:282ms ， DOM操作:157ms .
However, if you can cache the complex fragment, you get the benefit of not creating those DOM elements repeatedly, just cloning them. In the second test DOM wins out, because while the HTML method creates that DOM element collection 5000 times, the second cached method only creates it once, and clones it 5000 times. In this test: HTML Concat: 282ms, DOM Manipulation: 157ms.
我意识到这并不是直接回答您的问题，但是根据评论看来，对性能存在一些好奇，因此只提供一些您可以查看/测试/玩耍的东西.
I realize this isn't directly in response to your question, but based on comments it seems there's some curiosity about performance, so just giving something you can see/test/play with.
这篇关于哪个更好:生成字符串html还是创建jQuery DOM元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！