Run results for: create DOM Element Test

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Browser: Firefox 135

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

cloneMultiple

83K/s

cloneNode

57K/s

createElement

46K/s

innerHTML

31K/s

View exact numbers

Test name	Executions per second
✓ cloneMultiple	82,880 Ops/sec
cloneNode	56,968 Ops/sec
createElement	45,771 Ops/sec
innerHTML	31,380 Ops/sec

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); }

Run results for: create DOM Element Test

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

cloneMultiple

innerHTML

cloneNode

createElement