Benchmark: table rewrite vs insert row

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
render
renderEl
hibrid

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: 7 months ago)

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

Browser/OS: Chrome 117 on Windows

View result in a separate tab

Test name	Executions per second
render	60777.4 Ops/sec
renderEl	142654.4 Ops/sec
hibrid	42022.4 Ops/sec

table rewrite vs insert row (version: 0)

Comparing performance of: render vs renderEl vs hibrid

Created: 2 years ago by: Guest

Jump to the latest result

render

renderEl

hibrid

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A