字符串html生成和jquery DOM元素创建哪个更好？
好的，我在我当前的项目中重写了一些普通的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);回答 4
Stack Overflow用户
发布于 2010-04-22 19:36:12
从性能的角度来看：依赖于。
在简短的示例中，追加文本会更快，因为实际上直到最后才创建任何DOM元素。但是，如果您经常这样做，那么字符串连接的附加时间与缓存文档片段的性能之间的关系就会累积起来。
当您使用$(html) jQuery将其缓存为document fragment (假设字符串为512字节或更少)时，虽然如果只缓存$("<div />")...however (如果您执行数千次)不会有太大收益，但会有可测量的影响，因为字符串连接的开销随着字符串变长而变得更昂贵，缓存的文档片段成本相当稳定。
更新：这里有一些快速的例子来理解我的意思，在这里使用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 Contact: 25ms，DOM Manipulation: 149ms。
但是，如果可以缓存复杂的片段，则无需重复创建这些DOM元素，只需克隆它们即可。在第二个测试中，DOM胜出，因为HTML方法创建DOM元素集合5000次，而第二个缓存方法只创建一次，并克隆它5000次。在此测试中：HTML Concat: 282ms，DOM操作: 157ms。
我知道这不是直接回答你的问题，但根据评论，似乎有一些对性能的好奇心，所以只是给出一些你可以看到/测试/玩的东西。
Stack Overflow用户
发布于 2013-06-11 20:37:02
我测试了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方法有任何速度上的好处。然而，我还没有对此进行彻底的测试(如果迭代次数更多，可能会发生变化)。
Stack Overflow用户
发布于 2010-04-22 19:38:26
优先使用DOM操作而不是innerHTML方法。首先，DOM操作将正确处理需要使用innerHTML进行转义的字符。另一方面，它通常更快，有时要快得多。
https://stackoverflow.com/questions/2690352
复制相似问题
腾讯云开发者
