哪个更好：字符串html生成或jQuery DOM元素创建？
好的，我正在重写当前项目中的一些vanilla JS函数，并且我正在为工具提示等生成大量HTML。
我的问题是，这样做更好还是更喜欢：
var html = '<div><span>Some More Stuff</span></div>';
if (someCondition) {
html += '<div>Some Conditional Content</div>';
}
$('#parent').append(html);
要么
var html = $('<div/>').append($('<span/>').append('Some More Stuff'));
if (someCondition) {
html.append($('<div/>').append('Some conditionalContent');
}
$('#parent').append(html);
？
从性能角度来看： 这取决于 。
在你的简短例子中，追加文本的速度更快，因为实际上直到最后才会创建任何DOM元素。 但是，如果你这样做了很多，那么字符串连接的时间与缓存文档片段的性能会增加。
当你做$(html) jQuery缓存它作为一个文档片段（提供的字符串是512字节或更少），虽然没有太大的收益，如果你缓存$("<div />") ...但如果你做了好几千次，这有一个可衡量的影响，因为字符串连接变得越来越昂贵，因为你的字符串变长了，缓存的文档碎片成本相当稳定。
更新：下面是一些快速示例，了解我的意思，使用firebug获取控制台时间：
你可以自己运行它：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创建进行比较，几乎没有公平的比较，并且也不是真正有用的:)
您可以看到，由于缓存的片段越复杂，越缓存会产生影响。 在第一个测试中，没有条件清理了一下，DOM丢失了，因为在这个测试中（在我的机器上，但是你的比率应该大致相同）有很多小的操作正在进行： HTML联系人： 25ms ， DOM操作：149ms 。
但是，如果可以缓存复杂片段，则可以获得不重复创建这些DOM元素的好处，只需克隆它们即可。 在第二次测试中，DOM胜出，因为当HTML方法创建该DOM元素集合5000次时 ，第二个缓存方法仅创建一次 ，并将其克隆5000次。 在这个测试中： HTML Concat：282ms ， DOM操作：157ms 。
我意识到这不是直接回应你的问题，而是基于评论，似乎对性能有一些好奇心，所以只给你一些可以看/测试/玩的东西。
我已经测试了Nick Craver提交的代码，并且发现只有元素内容没有改变 ，DOM缓存才能更快地工作。 但是，如果您在for循环的每次迭代中更改字符串，速度会急剧下降 。
这里修改了相同的代码（在Fiddle上测试它：http://jsfiddle.net/Ps5ja/42/）
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');
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');
console.time('concat caching');
var html = "";
for(var i = 0; i < 10000; i++)
html += '<div><span>Some More Stuff</span></div><div>Some Conditional Content'+i+'</div>';
var elem = $(html);
console.timeEnd('concat caching');
console.time('concat array.join');
var arr = [];
for(i = 0; i < 10000; i++)
arr.push('<div><span>Some More Stuff</span></div><div>Some Conditional Content'+i+'</div>');
var elem = $(arr.join(''));
console.timeEnd('concat array.join');
console.time('DOM caching - NO modification');
var parent = $("<div />")
// here the contained text is unchanged in each iteration
for(var j = 0; j <10000; j++)
parent.append('<div><span>Some More Stuff</span></div><div>Some Conditional Content</div>');
console.timeEnd('DOM caching - NO modification');
console.time('DOM caching with modification');
var parent = $("<div />")
// here the contained text is modified in each iteration
// (the value od J is appended to the text)
for(var j = 0; j <10000; j++)
parent.append('<div><span>Some More Stuff</span></div><div>Some Conditional Content'+j+'</div>');
console.timeEnd('DOM caching with modification');
结论是，只有计划一遍又一遍地复制同一个HTML片段，DOM缓存才能更快速地工作。 如果不用字符串连接。
我没有发现使用Array.join方法的速度优势。 不过，我还没有完全测试过（如果迭代次数更多，可能会发生变化）。
支持通过innerHTML方法进行DOM操作。 首先，DOM操作将正确处理需要使用innerHTML转义的字符。 另一方面，它通常更快，有时更快。
链接地址: http://www.djcxy.com/p/83471.html上一篇: Which is better: string html generation or jquery DOM element creation?