clone vs. template (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Setup

var template_short = '<div class="post-text" itemprop="description"><p>Lets say we have a complex string <code>template</code> (maybe a div containing lots of other tags..) and we need to add this HTML node multiple times to our existing document.</p><p>Will it be faster to create the HTML nodes from the template each time</p><div class="stackfiddle-header"><span>Fiddle as: <a href="#" class="stackfiddle-choice stackfiddle-html" data-option="html">HTML</a> | <a href="#" class="stackfiddle-choice stackfiddle-js" data-option="js">JavaScript</a> | <a href="#" class="stackfiddle-choice stackfiddle-css" data-option="css">CSS</a><a href="#" class="stackfiddle-submit">Send to jsFiddle</a></span></div><pre class="default prettyprint stackfiddle-code"><code><span class="kwd">var</span><span class="pln"> $html </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">template</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 1st run</span><span class="pln"><br></span><span class="kwd">var</span><span class="pln"> $html </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">template</span><span class="pun">);</span><span class="pln"> </span><span class="com">// 2st run</span><span class="pln"><br></span><span class="pun">...</span><span class="pln"><br></span></code></pre><p>or to only create them once and then clone them:</p><div class="stackfiddle-header"><span>Fiddle as: <a href="#" class="stackfiddle-choice stackfiddle-html" data-option="html">HTML</a> | <a href="#" class="stackfiddle-choice stackfiddle-js" data-option="js">JavaScript</a> | <a href="#" class="stackfiddle-choice stackfiddle-css" data-option="css">CSS</a><a href="#" class="stackfiddle-submit">Send to jsFiddle</a></span></div><pre class="default prettyprint stackfiddle-code"><code><span class="kwd">var</span><span class="pln"> $template </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="kwd">template</span><span class="pun">);</span><span class="pln"> </span><span class="com">// init</span><span class="pln"><br></span><span class="kwd">var</span><span class="pln"> $html </span><span class="pun">=</span><span class="pln"> $template</span><span class="pun">.</span><span class="pln">clone</span><span class="pun">()</span><span class="pln"> </span><span class="com">// 1st run</span><span class="pln"><br></span><span class="kwd">var</span><span class="pln"> $html </span><span class="pun">=</span><span class="pln"> $template</span><span class="pun">.</span><span class="pln">clone</span><span class="pun">()</span><span class="pln"> </span><span class="com">// 2st run</span><span class="pln"><br></span><span class="pun">...</span><span class="pln"><br></span></code></pre>    </div>';
  var clone_template = $(template_short);
  var html = $(document.body);

Test runner

Ready to run.

Testing in
TestOps/sec
clone
html.append(clone_template.clone());
$(".test").remove();
ready
template
html.append(template_short);
$(".test").remove();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.