Insert jquery vs insert raw html

JavaScript performance comparison

Test case created by Evan Morikawa

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script>
// http://blog.stevenlevithan.com/archives/faster-than-innerhtml
window.replaceHtml = function(el, html) {
        var oldEl = typeof el === "string" ? document.getElementById(el) : el;
        var newEl = oldEl.cloneNode(false);
        newEl.innerHTML = html;
        oldEl.parentNode.replaceChild(newEl, oldEl);
        return newEl;
};
</script>

<div id='wrap'>
  <div id='container'></div>
</div>

<div id='insert'>
  Hello World <p>Some text</p>
</div>
<script>
Benchmark.prototype.setup = function() {
    $container = $("#container")
    container = $container[0]
    raw = $("#insert").html()
    $insert = $("<div>"+raw+"</div>")
};
</script>

Preparation code output

Hello World

Some text

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Insert $el
$("#container").html($insert)
pending…
Insert html
$("#container").html($insert.html())
pending…
Insert raw
$("#container").html(raw)
pending…
Custom replaceHtml
replaceHtml($("#container")[0], $insert.html())
pending…

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

Compare results of other browsers

0 comments

Add a comment