jquery.html vs innerHTML vs zepto vs (v11)

Revision 11 of this benchmark created on

Preparation HTML

<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="//zeptojs.com/zepto.min.js"></script>
<script src="//fastjs.net/js/fast.min.js"></script>

<div id="list" style="display:none"></div>

Setup

var html = '';
    for (var i = 0; i < 200; i++) {
      html += '<div>Test ' + i + '</div>';
    }

Teardown


    $('#list').empty();

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery.html()
jQuery('#list').html(html);
ready
jQuery.append()
jQuery('#list').append(html);
ready
Zepto.html()
Zepto('#list').html(html);
ready
Zepto.append()
Zepto('#list').append(html);
ready
innerHTML
document.getElementById('list').innerHTML = html;
ready
insertAdjacentHTML
document.getElementById('list').insertAdjacentHTML('beforeend', html);
ready
fast.html()
f.html('#list', html)
ready
fast.append()
f.append('#list', html)
ready

Revisions

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