好的,我在我目前的项目中重写一些香草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缓存它作为一个document fragment(提供的字符串是512字节或更少),虽然没有太多的收益,如果你缓存只是$(“< div /\u0026gt;\")...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联系人： 25ms,DOM操作：149ms.
但是,如果您可以缓存复杂的片段,您将获得不重复创建这些DOM元素的好处,只需克隆它们即可.在第二个测试中,DOM赢了,因为HTML方法创建了这个DOM元素集合5000次,所以第二个缓存方法只创建一次,并将其克隆5000次.在此测试中：HTML Concat：282ms,DOM操作：157ms.
