innerHTML vs jQuery.html() (v4)

Revision 4 of this benchmark created on

Description

innerHTML vs different versions of jQuery.html()

Preparation HTML

<div id="test" style="height:100px; overflow:scroll"></div>

<script src="//code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
var $190 = jQuery.noConflict();
</script>

<script src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var $182 = jQuery.noConflict();
</script>

<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var $171 = jQuery.noConflict();
</script>

<script src="//code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
var $161 = jQuery.noConflict();
</script>

<script src="//code.jquery.com/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var $126 = jQuery.noConflict();
</script>

<script type="text/javascript">
    var testEl = document.getElementById('test');
    var $190test = $190('#test');
    var $182test = $182('#test');
    var $171test = $171('#test');
    var $161test = $161('#test');
    var $126test = $126('#test');
</script>

Setup

var html = [];
    
    for(var i = 0; i < 250; i++) {
        html.push('<div class="test">Test</div>');
    }
    
    html_string = html.join('');

Teardown


    testEl.innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
innerHTML
testEl.innerHTML = html_string;
ready
jQuery.html() - v1.9.0
$190test.html(html_string)
ready
jQuery.html() - v1.8.2
$182test.html(html_string)
ready
jQuery.html() - v1.7.1
$171test.html(html_string)
ready
jQuery.html() - v1.6.1
$161test.html(html_string)
ready
jQuery.html() - v1.2.6
$126test.html(html_string)
ready
innerHtml 2
$190test.get(0).innerHTML = html_string;
ready

Revisions

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