blocks|key|1712708|text|从性能的角度来看：依赖于。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1712709|在简短的示例中，追加文本会更快，因为实际上直到最后才创建任何DOM元素。但是，如果您经常这样做，那么字符串连接的附加时间与缓存文档片段的性能之间的关系就会累积起来。|1712710|当您使用$(html)+jQuery将其缓存为document+fragment+(假设字符串为512字节或更少)时，虽然如果只缓存$("<div+/>")...however+(如果您执行数千次)不会有太大收益，但会有可测量的影响，因为字符串连接的开销随着字符串变长而变得更昂贵，缓存的文档片段成本相当稳定。|CODE|1712711|更新：这里有一些快速的例子来理解我的意思，在这里使用firebug来获取控制台时间：|1712712|您可以自己运行以下代码：http://jsfiddle.net/Ps5ja/|1712713|console.time('concat');
var+html+=+"";
for(var+i+=+0;+i+<+500;+i%2B%2B)+{
++++html+%2B=+'<div><span>Some+More+Stuff</span></div>';
++++html+%2B=+'<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%2B%2B)+{
++++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%2B%2B)
++++html+%2B=+'<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%2B%2B)
++++parent.append('<div><span>Some+More+Stuff</span></div><div>Some+Conditional+Content</div>');
console.timeEnd('DOM+caching');+//157ms|code-block|syntax|javascript|1712714|注意:字符串测试中的var+elem+=+$(html);是这样的，所以我们最终创建了相同的DOM元素，否则您将字符串连接与实际的DOM创建进行比较，这几乎不是一个公平的比较，也不是真正有用的:)|1712715|从上面可以看出，由于缓存的片段越复杂，缓存产生的影响就越大。在第一个测试中，这是您没有清理一下条件的示例，DOM失败了，因为在此测试中(在我的机器上，但您的比率应该大致相同)中有许多小操作正在进行：HTML+Contact:+25ms，DOM+Manipulation:+149ms。|1712716|但是，如果可以缓存复杂的片段，则无需重复创建这些DOM元素，只需克隆它们即可。在第二个测试中，DOM胜出，因为HTML方法创建DOM元素集合5000次，而第二个缓存方法只创建一次，并克隆它5000次。在此测试中：HTML+Concat:+282ms，DOM操作:+157ms。|1712717|我知道这不是直接回答你的问题，但根据评论，似乎有一些对性能的好奇心，所以只是给出一些你可以看到/测试/玩的东西。|1712718|entityMap|0|LINK|mutability|MUTABLE|url|http://ejohn.org/blog/dom-documentfragments/|1|http://jsfiddle.net/Ps5ja/^0|9|3|0|0|4|7|1U|C|N|H|0|0|0|3|0|C|Q|1|0|0|A|J|0|2R|I|3A|N|0|1Y|5|2F|2|2Y|I|3H|C|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1F|8|@$9|1G|A|1H|B|J]|$9|1I|A|1J|B|J]]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|K|3|L|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1Q|8|@]|D|@$9|1R|A|1S|1|1T]]|E|$]]|$1|O|3|P|5|Q|7|1U|8|@]|D|@]|E|$R|S]]|$1|T|3|U|5|6|7|1V|8|@$9|1W|A|1X|B|J]]|D|@]|E|$]]|$1|V|3|W|5|6|7|1Y|8|@$9|1Z|A|20|B|C]|$9|21|A|22|B|C]]|D|@]|E|$]]|$1|X|3|Y|5|6|7|23|8|@$9|24|A|25|B|C]|$9|26|A|27|B|C]|$9|28|A|29|B|C]|$9|2A|A|2B|B|C]]|D|@]|E|$]]|$1|Z|3|10|5|6|7|2C|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|2D|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18]]|19|$5|14|15|16|E|$17|1A]]]]

<p>From a performance standpoint: <strong>it depends</strong>.</p>

<p>In your short example, it's faster to append the text, since you actually aren't creating any DOM elements until the end.  However if you were doing this a <em>lot</em>, then the added time of string concatenation vs the performance of cached document fragments adds up.</p>

<p>When you do <code>$(html)</code> jQuery caches it as a <a href="http://ejohn.org/blog/dom-documentfragments/" rel="noreferrer">document fragment</a> (provided the string is 512 bytes or less), though there's not much gain if you're caching just <code>$("&lt;div /&gt;")</code>...however if you're doing it thousands of times, there is a measurable impact, as string concatenation gets more expensive as your string gets longer, the cached document fragment cost is pretty steady.</p>

<p><strong>Update:</strong> Here's some quick examples to see what I mean, use firebug to get the console times here:</p>

<p>You can run this for yourself: <a href="http://jsfiddle.net/Ps5ja/" rel="noreferrer">http://jsfiddle.net/Ps5ja/</a></p>

<pre><code>console.time('concat');
var html = "";
for(var i = 0; i &lt; 500; i++) {
    html += '&lt;div&gt;&lt;span&gt;Some More Stuff&lt;/span&gt;&lt;/div&gt;';
    html += '&lt;div&gt;Some Conditional Content&lt;/div&gt;';
}
var elem = $(html);
console.timeEnd('concat'); //25ms

console.time('DOM');
var parent = $("&lt;div /&gt;")
for(var j = 0; j &lt; 500; j++) {
    parent.append($('&lt;div/&gt;').append($('&lt;span/&gt;', {text :'Some More Stuff'})));
    parent.append($('&lt;div/&gt;',{ text: 'Some conditionalContent' }));
}
console.timeEnd('DOM'); //149ms

console.time('concat caching');
var html = "";
for(var i = 0; i &lt; 5000; i++)
    html += '&lt;div&gt;&lt;span&gt;Some More Stuff&lt;/span&gt;&lt;/div&gt;&lt;div&gt;Some Conditional Content&lt;/div&gt;';
var elem = $(html);
console.timeEnd('concat caching'); //282ms

console.time('DOM caching');
var parent = $("&lt;div /&gt;")
for(var j = 0; j &lt; 5000; j++)
    parent.append('&lt;div&gt;&lt;span&gt;Some More Stuff&lt;/span&gt;&lt;/div&gt;&lt;div&gt;Some Conditional Content&lt;/div&gt;');
console.timeEnd('DOM caching'); //157ms
</code></pre>

<p><em>Note: the <code>var elem = $(html);</code> in the string test is so we end up creating the same DOM elements, otherwise you're comparing string concatenation to actual DOM creation, hardly a fair comparison, and not really useful either :)</em></p>

<p>You can see by the above, as the cached fragment is more complex, the more caching makes an impact.  In the first test, which is your example without the condition cleaned up a bit, DOM loses because there are lots of little operations going on, in this test (on my machine, but your ratios should be about the same): <strong>HTML Contact: 25ms</strong>, <strong>DOM Manipulation: 149ms</strong>.</p>

<p>However, if you can cache the complex fragment, you get the benefit of not creating those DOM elements repeatedly, just cloning them.  In the second test DOM wins out, because while the HTML method creates that DOM element collection <strong>5000 times</strong>, the second cached method only creates it <strong>once</strong>, and clones it 5000 times.  In this test: <strong>HTML Concat: 282ms</strong>, <strong>DOM Manipulation: 157ms</strong>.</p>

<p>I realize this isn't <em>directly</em> in response to your question, but based on comments it seems there's some curiosity about performance, so just giving something you can see/test/play with.</p>


blocks|key|3121178|text|优先使用DOM操作而不是innerHTML方法。首先，DOM操作将正确处理需要使用innerHTML进行转义的字符。另一方面，它通常更快，有时要快得多。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3121179|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Favour DOM manipulation over innerHTML methods. For one thing, DOM manipulation will correctly handle characters that need to be escaped with innerHTML. For another, it is typically faster, sometimes <em>much</em> faster.</p>


blocks|key|1123874|text|通常，如果我有很多html要生成，我会将它们收集到一个字符串中，然后让浏览器一次生成所有元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1123875|如果涉及到很多条件或循环，那么您可能希望使用Array.join()而不是字符串与%2B的连接。使用字符串连接，浏览器将生成许多中间字符串，这可能非常慢；Array.join()跳过所有这些中间字符串。对于这些情况，我会这样做：|1123876|var+html+=+['<div><span>Some+More+Stuff</span></div>'];
for+(var+i+=+0;+i+<+1000;+i%2B%2B)+{
++++html.push('<div>Some+Loop+Content</div>');
}
$('#parent').append(html.join(''));|code-block|syntax|javascript|1123877|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>In general, if I have a lot of html to generate, I collect it all in one string and let the browser generate the elements all at once.</p>

<p>If there will be lots of conditionals or loops involved, then you may want to use Array.join() instead of string concatenation with +. With string concatenation the browser will generate lots of intermediate strings which can be very slow; Array.join() skips all those intermediate strings. For these cases I'd do something like:</p>

<pre><code>var html = ['&lt;div&gt;&lt;span&gt;Some More Stuff&lt;/span&gt;&lt;/div&gt;'];
for (var i = 0; i &lt; 1000; i++) {
    html.push('&lt;div&gt;Some Loop Content&lt;/div&gt;');
}
$('#parent').append(html.join(''));
</code></pre>


blocks|key|375659|text|我测试了Nick+Craver提交的代码，发现只有在元素的内容不改变的情况下，DOM缓存才能在中运行得更快。但是，如果您在for循环的每次迭代中更改字符串，速度会显著降低。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|375660|下面是修改后的相同代码(在Fiddle：http://jsfiddle.net/Ps5ja/42/上测试)|375661|console.time('concat');
var+html+=+"";
for(var+i+=+0;+i+<+500;+i%2B%2B)+{
++++html+%2B=+'<div><span>Some+More+Stuff</span></div>';
++++html+%2B=+'<div>Some+Conditional+Content</div>';
}
var+elem+=+$(html);
console.timeEnd('concat');

console.time('DOM');
var+parent+=+$("<div+/>")
for(var+j+=+0;+j+<+500;+j%2B%2B)+{
++++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%2B%2B)
++++html+%2B=+'<div><span>Some+More+Stuff</span></div><div>Some+Conditional+Content'%2Bi%2B'</div>';
var+elem+=+$(html);
console.timeEnd('concat+caching');

console.time('concat+array.join');
var+arr+=+[];
for(i+=+0;+i+<+10000;+i%2B%2B)
++++arr.push('<div><span>Some+More+Stuff</span></div><div>Some+Conditional+Content'%2Bi%2B'</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%2B%2B)
++++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%2B%2B)
++++parent.append('<div><span>Some+More+Stuff</span></div><div>Some+Conditional+Content'%2Bj%2B'</div>');
console.timeEnd('DOM+caching+with+modification');|code-block|syntax|javascript|375662|结论是，只有当您计划一遍又一遍地复制相同的HTML片段时，DOM缓存才能工作得更快。如果不是，则使用字符串连接。|375663|我没有发现使用Array.join方法有任何速度上的好处。然而，我还没有对此进行彻底的测试(如果迭代次数更多，可能会发生变化)。|375664|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Ps5ja/42/^0|1B|13|0|0|1H|K|T|0|0|0|0|1K|0|0|1S|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>I have tested the code Nick Craver has submitted and have found that DOM caching works faster <strong>only if the content of the element does not change</strong>. If you however alter the string in each iteration of the for loop, the speed <strong>dramatically decreases</strong>.</p>

<p>Here's the same code modified (test it on Fiddle: <a href="http://jsfiddle.net/Ps5ja/42/" rel="noreferrer">http://jsfiddle.net/Ps5ja/42/</a>)</p>

<pre><code>console.time('concat');
var html = "";
for(var i = 0; i &lt; 500; i++) {
    html += '&lt;div&gt;&lt;span&gt;Some More Stuff&lt;/span&gt;&lt;/div&gt;';
    html += '&lt;div&gt;Some Conditional Content&lt;/div&gt;';
}
var elem = $(html);
console.timeEnd('concat');

console.time('DOM');
var parent = $("&lt;div /&gt;")
for(var j = 0; j &lt; 500; j++) {
    parent.append($('&lt;div/&gt;').append($('&lt;span/&gt;', {text :'Some More Stuff'})));
    parent.append($('&lt;div/&gt;',{ text: 'Some conditionalContent' }));
}
console.timeEnd('DOM');

console.time('concat caching');
var html = "";
for(var i = 0; i &lt; 10000; i++)
    html += '&lt;div&gt;&lt;span&gt;Some More Stuff&lt;/span&gt;&lt;/div&gt;&lt;div&gt;Some Conditional Content'+i+'&lt;/div&gt;';
var elem = $(html);
console.timeEnd('concat caching');

console.time('concat array.join');
var arr = [];
for(i = 0; i &lt; 10000; i++)
    arr.push('&lt;div&gt;&lt;span&gt;Some More Stuff&lt;/span&gt;&lt;/div&gt;&lt;div&gt;Some Conditional Content'+i+'&lt;/div&gt;');

var elem = $(arr.join(''));
console.timeEnd('concat array.join');

console.time('DOM caching - NO modification');
var parent = $("&lt;div /&gt;")
// here the contained text is unchanged in each iteration
for(var j = 0; j &lt;10000; j++)
    parent.append('&lt;div&gt;&lt;span&gt;Some More Stuff&lt;/span&gt;&lt;/div&gt;&lt;div&gt;Some Conditional Content&lt;/div&gt;');
console.timeEnd('DOM caching - NO modification');

console.time('DOM caching with modification');
var parent = $("&lt;div /&gt;")
// here the contained text is modified in each iteration
// (the value od J is appended to the text)
for(var j = 0; j &lt;10000; j++)
    parent.append('&lt;div&gt;&lt;span&gt;Some More Stuff&lt;/span&gt;&lt;/div&gt;&lt;div&gt;Some Conditional Content'+j+'&lt;/div&gt;');
console.timeEnd('DOM caching with modification');
</code></pre>

<p>The conclusion is that DOM caching works faster only if you plan to replicate the same HTML fragment over and over. If not go with the string concatenation.</p>

<p>I haven't found any speed benefits in using Array.join method. However I haven't tested that thoroughly (it might be that changes if the number of iterations is bigger).</p>


<p>Ok, I'm rewriting some vanilla JS functions in my current project, and I'm at a point where there's a lot of HTML being generated for tooltips etc.</p>

<p>My question is, is it better/preferred to do this:</p>

<pre><code>var html = '&lt;div&gt;&lt;span&gt;Some More Stuff&lt;/span&gt;&lt;/div&gt;';
if (someCondition) {
    html += '&lt;div&gt;Some Conditional Content&lt;/div&gt;';
}
$('#parent').append(html);
</code></pre>

<p>OR</p>

<pre><code>var html = $('&lt;div/&gt;').append($('&lt;span/&gt;').append('Some More Stuff'));
if (someCondition) {
    html.append($('&lt;div/&gt;').append('Some conditionalContent');
}
$('#parent').append(html);
</code></pre>

<p>?</p>


Which is better: string html generation or jquery DOM element creation?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

好的，我在我当前的项目中重写了一些普通的JS函数，并且我正在为工具提示等生成大量的HTML。我的问题是，这样做是否更好/更可取：var html = '<div><span>Some More Stuff</span></div>';if (someCondition) {    html += '<div>Some ...

问字符串html生成和jquery DOM元素创建哪个更好？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问字符串html生成和jquery DOM元素创建哪个更好？EN