Run results for: table rewrite vs insert row

Run details:

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

Browser: Chrome 98

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
render	79015.7 Ops/sec
renderEl	104270.2 Ops/sec
hibrid	72596.8 Ops/sec

HTML Preparation code:

<table id="t"></table>

Script Preparation code:

var t = document.getElementById('t');
var tt = document.getElementById('tt');
var ttt = document.getElementById('tt');


function render() {
const out = ['<tr>'];
  for(let i = 0;i<7;i++) out.push('<td>'+i+'</td>');
  out.push('<tr>');
  return out.join('');
}

 function renderEl() {
  const rowEl = document.createElement('tr');
   for(let i = 0;i<7;i++) {
   const td = document.createElement('td');
     rowEl.appendChild(td);
   }
   return rowEl;
 }
 function hibrid() {
  const rowEl = document.createElement('tr');
   const out = [];
   for(let i = 0;i<7;i++) out.push('<td>'+i+'</td>');
    rowEl.insertAdjacentHTML('afterbegin', out.join(''));
   return rowEl;
 }

Tests:

render
t.innnerHTML = ''; t.insertAdjacentHTML('afterbegin', render());
renderEl
t.innnerHTML = ''; t.appendChild(renderEl());
hibrid
t.innnerHTML = ''; t.appendChild(hibrid());