哪个更好：字符串html生成或jquery DOM元素创建？

好吧，我正在重写当前项目中的一些vanilla JS函数，而且我正处于为工具提示等生成大量HTML的地方。

我的问题是，更好/首选这样做：

var html = '
Some More Stuff
'; if (someCondition) { html += '
Some Conditional Content
'; } $('#parent').append(html); 

要么

 var html = $('
').append($('').append('Some More Stuff')); if (someCondition) { html.append($('
').append('Some conditionalContent'); } $('#parent').append(html); 

？

Answer 1

从绩效的角度来看： 这取决于 。

在您的简短示例中，附加文本更快，因为您实际上直到最后才创建任何DOM元素。 但是，如果您经常这样做，那么字符串连接的增加时间与缓存文档片段的性能相加。

当你执行$(html) jQuery将其缓存为文档片段 （假设字符串为512字节或更少），但如果你只缓存$("

")则没有多少收获…但是如果你做了几千次，有一个可衡量的影响，因为字符串连接变得更加昂贵，因为你的字符串变得更长，缓存的文档片段成本非常稳定。

更新：以下是一些快速示例，看看我的意思，使用firebug来获取控制台时间：

你可以自己运行： http ： //jsfiddle.net/Ps5ja/

 console.time('concat'); var html = ""; for(var i = 0; i < 500; i++) { html += '
Some More Stuff
'; html += '
Some Conditional Content
'; } var elem = $(html); console.timeEnd('concat'); //25ms console.time('DOM'); var parent = $("
") for(var j = 0; j < 500; j++) { parent.append($('
').append($('', {text :'Some More Stuff'}))); parent.append($('
',{ text: 'Some conditionalContent' })); } console.timeEnd('DOM'); //149ms console.time('concat caching'); var html = ""; for(var i = 0; i < 5000; i++) html += '
Some More Stuff
Some Conditional Content
'; var elem = $(html); console.timeEnd('concat caching'); //282ms console.time('DOM caching'); var parent = $("
") for(var j = 0; j < 5000; j++) parent.append('
Some More Stuff
Some Conditional Content
'); console.timeEnd('DOM caching'); //157ms 

注意： var elem = $(html); 在字符串测试中我们最终创建相同的DOM元素，否则你将字符串连接与实际的DOM创建进行比较，几乎不公平比较，并且不是真的有用:)

您可以通过上面的内容看到，由于缓存片段更复杂，缓存越多，影响越大。 在第一个测试中，这是没有条件清理的示例，DOM丢失，因为在此测试中有很多小的操作（在我的机器上，但你的比率应该大致相同）： HTML联系人： 25ms ， DOM操作：149ms 。

但是，如果您可以缓存复杂片段，则可以获得不重复创建这些DOM元素的好处，只需克隆它们即可。 在第二个测试中，DOM胜出，因为虽然HTML方法创建了530次 DOM元素集合，但第二个缓存方法只创建一次 ，并将其克隆5000次。 在此测试中： HTML Concat：282ms ， DOM操作：157ms 。

我意识到这不是直接回答你的问题，但根据评论，似乎对性能有一些好奇，所以只是给你可以看到/测试/玩的东西。

Answer 2

我已经测试了Nick Craver提交的代码，并且发现只有元素的内容没有改变时 ，DOM缓存才能更快地运行。 但是，如果您在for循环的每次迭代中更改字符串，则速度会急剧下降 。

这里修改了相同的代码（在Fiddle上测试它： http ： //jsfiddle.net/Ps5ja/42/ ）

 console.time('concat'); var html = ""; for(var i = 0; i < 500; i++) { html += '
Some More Stuff
'; html += '
Some Conditional Content
'; } var elem = $(html); console.timeEnd('concat'); console.time('DOM'); var parent = $("
") for(var j = 0; j < 500; j++) { parent.append($('
').append($('', {text :'Some More Stuff'}))); parent.append($('
',{ text: 'Some conditionalContent' })); } console.timeEnd('DOM'); console.time('concat caching'); var html = ""; for(var i = 0; i < 10000; i++) html += '
Some More Stuff
Some Conditional Content'+i+'
'; var elem = $(html); console.timeEnd('concat caching'); console.time('concat array.join'); var arr = []; for(i = 0; i < 10000; i++) arr.push('
Some More Stuff
Some Conditional Content'+i+'
'); var elem = $(arr.join('')); console.timeEnd('concat array.join'); console.time('DOM caching - NO modification'); var parent = $("
") // here the contained text is unchanged in each iteration for(var j = 0; j <10000; j++) parent.append('
Some More Stuff
Some Conditional Content
'); console.timeEnd('DOM caching - NO modification'); console.time('DOM caching with modification'); var parent = $("
") // 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('
Some More Stuff
Some Conditional Content'+j+'
'); console.timeEnd('DOM caching with modification'); 

结论是，只有当您计划反复复制相同的HTML片段时，DOM缓存才能更快地运行。 如果没有使用字符串连接。

我没有发现使用Array.join方法有任何速度优势。 但是我没有彻底测试过（如果迭代次数更多，可能会发生变化）。

Answer 3

支持DOM操作而不是innerHTML方法。 首先，DOM操作将正确处理需要使用innerHTML进行转义的字符。 另一方面，它通常更快，有时更快。

Answer 4

一般来说，如果我要生成很多html，我会将它全部收集在一个字符串中，让浏览器一次性生成所有元素。

如果涉及到大量的条件或循环，那么您可能希望使用Array.join（）而不是使用+的字符串连接。 使用字符串连接，浏览器将生成许多中间字符串，这可能非常慢; Array.join（）跳过所有这些中间字符串。 对于这些情况，我会做类似的事情：

 var html = ['
Some More Stuff
']; for (var i = 0; i < 1000; i++) { html.push('
Some Loop Content
'); } $('#parent').append(html.join(''));