html快速生成string,哪个更好：string html生成或jquery创建DOM元素？

从性能的角度来看：这取决于.

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

当你做$(html)jQuery缓存它作为一个document fragment(提供的字符串是512字节或更少),虽然没有太多的收益,如果你缓存只是$(“< div /\u0026gt;\")...however如果你这样做了数千次,那么会产生可衡量的影响,因为字符串连接越来越昂贵,因为字符串的长度越长,缓存的文档片段的成本就相当稳定. 更新：这里有一些快速的例子来看看我的意思,使用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($('

', {text :'Some More Stuff'})));

parent.append($('

}

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方法创建了这个DOM元素集合5000次,所以第二个缓存方法只创建一次,并将其克隆5000次.在此测试中：HTML Concat：282ms,DOM操作：157ms.

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