jquery html() vs replaceWith

JavaScript performance comparison

Test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="c1_ctl">
<div id="c1" class="ui_widget" style="display:inline-block; margin:0.2em;">        <div class="ui-widget-header ui-corner-top" style="width: 12em; padding: 0.2em;">Rechnung Nr.: 2<span class="ui-icon ui-icon-close" style="float:right;"></span> </div>    <div class="ui-widget-content ui-corner-bottom" style="padding: 0.2em;">        <p>            </p><div style="float:left; vertical-align:middle;"> <input type="checkbox"></div>            <div style="float:left;">                 <div>Kunde: person2</div>                <div>Preis: 2,2€</div>            </div>        <p></p>    </div>   </div>
</div>
<script>
Benchmark.prototype.teardown = function() {
    jQuery("#c1").replaceWith('<div id="c1" class="ui_widget" style="display:inline-block; margin:0.2em;">        <div class="ui-widget-header ui-corner-top" style="width: 12em; padding: 0.2em;">Rechnung Nr.: 2<span class="ui-icon ui-icon-close" style="float:right;"></span> </div>    <div class="ui-widget-content ui-corner-bottom" style="padding: 0.2em;">        <p>            </p><div style="float:left; vertical-align:middle;"> <input type="checkbox"></div>            <div style="float:left;">                 <div>Kunde: person2</div>                <div>Preis: 2,2€</div>            </div>        <p></p>    </div>   </div>');
};
</script>

Preparation code output

Rechnung Nr.: 2

Kunde: person2
Preis: 2,2€

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
use .html() to replace the content of a wrapper
jQuery("#c1_ctl").html(
'<div class="ui_widget" style="display:inline-block; margin:0.2em;">        <div class="ui-widget-header ui-corner-top" style="width: 12em; padding: 0.2em;">Rechnung Nr.: 10<span class="ui-icon ui-icon-close" style="float:right;"></span> </div>    <div class="ui-widget-content ui-corner-bottom" style="padding: 0.2em;">        <p>            </p><div style="float:left; vertical-align:middle;"> <input type="checkbox"></div>            <div style="float:left;">                 <div>Kunde: person10</div>                <div>Preis: 11€</div>            </div>        <p></p>    </div>   </div>'
);
pending…
use .replaceWith() to replace the content
jQuery("#c1").replaceWith(
'<div class="ui_widget" style="display:inline-block; margin:0.2em;">        <div class="ui-widget-header ui-corner-top" style="width: 12em; padding: 0.2em;">Rechnung Nr.: 10<span class="ui-icon ui-icon-close" style="float:right;"></span> </div>    <div class="ui-widget-content ui-corner-bottom" style="padding: 0.2em;">        <p>            </p><div style="float:left; vertical-align:middle;"> <input type="checkbox"></div>            <div style="float:left;">                 <div>Kunde: person10</div>                <div>Preis: 11€</div>            </div>        <p></p>    </div>   </div>'
);
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment