Run results for: create DOM Element Test

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Browser: Chrome 68

Operating system: Windows

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
cloneMultiple	30316.8 Ops/sec
innerHTML	15773.1 Ops/sec
cloneNode	15528.5 Ops/sec
createElement	12032.4 Ops/sec
fragment + cloneNode	8252.1 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