Benchmark: String concatenation vs element creation 2

Script Preparation code:

const data = [];

for (let i=0; i<100; i++) {
  const d = [
    Math.random().toString().slice(2, 7),
    Math.random().toString().slice(2, 10),
    Math.random() > 0.5 ? "Ms" : "Mr",
    Math.random().toString().slice(2, 8),
    Math.random().toString().slice(2, 4),
  ]

  data.push(d);
}

window.data = data;

Tests:

String concatenation
const container = document.createElement("div"); let temptableHolder = ` <table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Title</th> <th>ID</th> <th>Department</th> </tr> </thead> <tbody>`; for (const row of data) { temptableHolder += "<tr>"; for (const [k, v] of Object.entries(row)) { temptableHolder += `<td>${v}</td>` } temptableHolder += "</tr>"; } temptableHolder += '</tbody></table>'; container.innerHTML = temptableHolder;
createElement
const container = document.createElement("div"); const tableBody = document.createElement('tbody'); container.appendChild(tableBody); const head = document.createElement("thead"); tableBody.appendChild(head); const header = document.createElement("tr"); head.appendChild(header); for (s of ["First Name", "Last Name", "Title", "ID", "Department"]) { const cell = document.createElement("th"); cell.appendChild(document.createTextNode(s)); header.appendChild(cell); } for (const row of data) { const rowElement = document.createElement("tr"); tableBody.appendChild(rowElement); for (const [k, v] of Object.entries(row)) { const cell = document.createElement("td"); rowElement.appendChild(cell); cell.appendChild(document.createTextNode(v)); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
String concatenation
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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36

Browser/OS: Chrome 106 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
String concatenation	3871.7 Ops/sec
createElement	2468.7 Ops/sec

String concatenation vs element creation 2 (version: 1)

Comparing performance of: String concatenation vs createElement

Created: one year ago by: Registered User

Jump to the latest result

String concatenation

createElement

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A