Benchmark: Inserting children

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Tests:

inserting via Jquery
var div = document.createElement("DIV"); var $div = $(div); for(i=0; i<1000; i++){ $div.append($("<span class='line-number'>" + String(i) + "</span>")); }
Inserting via vanilla javascript
var div = document.createElement("DIV"); for(i=0; i<1000; i++){ var lineNumberSpan = document.createElement("SPAN"); lineNumberSpan.innerHTML = String(1); lineNumberSpan.className = "line-number"; div.appendChild(lineNumberSpan); }

Rendered benchmark preparation results:

Previous results

Test case name	Result
inserting via Jquery
Inserting via vanilla javascript

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36

Browser/OS: Chrome 84 on Mac OS X 10.14.6

Test name	Executions per second
inserting via Jquery	28.6 Ops/sec
Inserting via vanilla javascript	137.7 Ops/sec

Inserting children (version: 0)