insertAdjacentHTML vs jQuery append

Benchmark created by pedro on

Preparation HTML

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

Setup

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

Test runner

Ready to run.

Testing in
TestOps/sec
jquery append
for (var i = 0; i < 100; i++) {
  $menu.append($html)
}
menu.innerHTML = ""
ready
insertAdjacentHTML
for (var i = 0; i < 100; i++) {
  menu.insertAdjacentHTML("beforeend", 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