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

概述好的,我在我目前的项目中重写一些香草JS函数,而且我正在为工具提示等生成大量HTML. 我的问题是,更好/更喜欢这样做： var html = '<div><span>Some More Stuff</span></div>';if (someCondition) { html += '<div>Some Conditional Content</div>';}$('#parent' 好的,我在我目前的项目中重写一些香草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'); //25msconsole.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'); //149msconsole.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'); //282msconsole.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.

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

总结

以上是内存溢出为你收集整理的哪个更好：string html生成或jquery创建DOM元素？全部内容，希望文章能够帮你解决哪个更好：string html生成或jquery创建DOM元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。