insertAdjacentHTML vs jQuery append vs $.parseHTML (v6)

Revision 6 of this benchmark created by Heavensrevenge on

Preparation HTML

<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>

<ul id="menu"> </ul>

Setup

var $menu = $("#menu");
    var menu = document.getElementById("menu");
    
    
    var html = "<li>new element</li>";
    var $html1 = $("<li>new element</li>");
    var $html2 = $.parseHTML("<li>new element</li>");

Test runner

Ready to run.

Testing in
TestOps/sec
jquery append normal
for (var i = 0; i < 100; i++) {
  $menu.append($html1)
}
menu.innerHTML = ""
ready
jquery append .parseHTML
for (var i = 0; i < 100; i++) {
  $menu.append($html2)
}
menu.innerHTML = ""
ready
jquery[0] + innerAdj
for (var i = 0; i < 100; i++) {
  $menu[0].insertAdjacentHTML("beforeend", html)
}
menu.innerHTML = ""
ready
insertAdjacentHTML
for (var i = 0; i < 100; i++) {
  menu.insertAdjacentHTML("beforeend", html)
}
menu.innerHTML = ""
ready
html +=
for (var i = 0; i < 100; i++) {
  menu.innerHTML += html;
}
menu.innerHTML = ""
ready

Revisions

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

  • Revision 1: published by pedro on
  • Revision 3: published by Jonatas Miguel on
  • Revision 4: published on
  • Revision 5: published on
  • Revision 6: published by Heavensrevenge on