Benchmark: create DOM Element Test

HTML Preparation code:

 <ul class="list">

</ul>

Script Preparation code:

  var list = document.querySelector('.list'),
      num = 10,
      t;
function cloneMultiple (elem, times, deep) {
   let fragment = document.createDocumentFragment();
   fragment.appendChild(elem.cloneNode(deep));
   if (times <= 1) {
       return fragment;
   }

   let i = 1,
       rest = [];

   while((times % 2 === 0 || !!(rest[i] = 1 && --times)) && (times /= 2) && times >3 ) {
        i += 1;  
   }

   while ( times > 1 ) {
      fragment.appendChild(elem.cloneNode(deep));
      --times;
   }

    for ( ; i; --i ) {
      fragment.appendChild(fragment.cloneNode(true));   
      rest[i] && fragment.appendChild(elem.cloneNode(deep));
    }
   
   return fragment;
 }

Tests:

cloneMultiple
var li = document.createElement('li'); list.appendChild(cloneMultiple(li, num, true));
innerHTML
var str = ''; for (t = 0; t < num; t++) { str += `<li><li>`; } list.innerHTML = str;
cloneNode
var li = document.createElement('li'); for (t = 0; t < num; t++) { var cloneLi = li.cloneNode(); list.appendChild(cloneLi); }
createElement
for (t = 0; t < num; t++) { var li = document.createElement('li'); list.appendChild(li); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
cloneMultiple
innerHTML
cloneNode
createElement

Fastest: N/A

Slowest: N/A

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

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:106.0) Gecko/20100101 Firefox/106.0

Browser/OS: Firefox 106 on Linux

View result in a separate tab

Test name	Executions per second
cloneMultiple	99682.5 Ops/sec
innerHTML	41500.7 Ops/sec
cloneNode	87503.6 Ops/sec
createElement	78876.7 Ops/sec

create DOM Element Test (version: 11)

createElement, innerHTML, cloneNode方法创建DOM元素时间测试

Comparing performance of: cloneMultiple vs innerHTML vs cloneNode vs createElement

Created: 5 years ago by: Registered User

Jump to the latest result

cloneMultiple

innerHTML

cloneNode

createElement

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A