Benchmark: Array access + add diff types

HTML Preparation code:

<div id="root"></div>

Tests:

Separate adds
let sliderIncrements=[] let imgsl=[] let leftbtns=[] let rightbtns=[] //let imgLimit=[] let SLI=0 function gIndivListing(imgList, imgLen) { const tileListing = document.createElement('div') tileListing.classList.add("tile-listing"); const leftbtn = document.createElement('button') const rightbtn = document.createElement('button') // let qid = 'q_' + SLI.toString(16) leftbtn.className = 'slbtn l o0' leftbtn.id='za'+SLI.toString(16) leftbtns.push(leftbtn) rightbtn.className = 'slbtn r' rightbtn.id='zb'+SLI.toString(16) rightbtns.push(rightbtn) sliderIncrements.push(0) SLI++ const taskItem = document.createElement('div') taskItem.className = 'taskItem oh' tileListing.appendChild(leftbtn) tileListing.appendChild(rightbtn) const fillImgAnchor = document.createElement("a"); fillImgAnchor.href = "/imageID"; fillImgAnchor.classList.add("fillImg"); const fillImg = document.createElement("img"); fillImg.src = imgList[0]; fillImg.className = "noselect"; fillImgAnchor.appendChild(fillImg); taskItem.appendChild(fillImgAnchor); const imgWrp = document.createElement('div') imgWrp.classList.add("imgWrp"); imgsl.push(fillImgAnchor) for (let i = 1; i < imgLen; i++) { const anchor = document.createElement("a"); anchor.href = "/imageID"; const img = document.createElement("img"); img.src = imgList[i]; img.className = "noselect"; anchor.appendChild(img); imgWrp.appendChild(anchor); } taskItem.appendChild(imgWrp); const txtData = document.createElement('div') txtData.classList.add("txtData"); const h6 = document.createElement("h6"); h6.textContent = "Fujifilm GFX 69s, brand new in box"; const h2 = document.createElement("h2"); h2.classList.add("price"); h2.textContent = "$4,000"; const span = document.createElement("span"); span.textContent = "Used - Mint"; const span2 = document.createElement("span"); span2.textContent = "Missouri (2 miles)"; txtData.appendChild(h6); txtData.appendChild(h2); txtData.appendChild(span); tileListing.appendChild(taskItem); tileListing.appendChild(txtData); return tileListing } let TLS = document.createElement('div') TLS.id='TLS' TLS.className='long' for (let i = 0; i < 10; ++i) { TLS.appendChild(gIndivListing(['/images/ass.jpeg','/images/ass.jpeg','/images/ass.jpeg','/images/ass.jpeg'],4)) }
Aggregate
let SLI=0 let aggregate=[] function gIndivListing(imgList, imgLen) { const tileListing = document.createElement('div') tileListing.classList.add("tile-listing"); const leftbtn = document.createElement('button') const rightbtn = document.createElement('button') // let qid = 'q_' + SLI.toString(16) leftbtn.className = 'slbtn l o0' leftbtn.id='za'+SLI.toString(16) rightbtn.className = 'slbtn r' rightbtn.id='zb'+SLI.toString(16) SLI++ const taskItem = document.createElement('div') taskItem.className = 'taskItem oh' tileListing.appendChild(leftbtn) tileListing.appendChild(rightbtn) const fillImgAnchor = document.createElement("a"); fillImgAnchor.href = "/imageID"; fillImgAnchor.classList.add("fillImg"); const fillImg = document.createElement("img"); fillImg.src = imgList[0]; fillImg.className = "noselect"; fillImgAnchor.appendChild(fillImg); taskItem.appendChild(fillImgAnchor); const imgWrp = document.createElement('div') imgWrp.classList.add("imgWrp"); for (let i = 1; i < imgLen; i++) { const anchor = document.createElement("a"); anchor.href = "/imageID"; const img = document.createElement("img"); img.src = imgList[i]; img.className = "noselect"; anchor.appendChild(img); imgWrp.appendChild(anchor); } taskItem.appendChild(imgWrp); const txtData = document.createElement('div') txtData.classList.add("txtData"); const h6 = document.createElement("h6"); h6.textContent = "Fujifilm GFX 69s, brand new in box"; const h2 = document.createElement("h2"); h2.classList.add("price"); h2.textContent = "$4,000"; const span = document.createElement("span"); span.textContent = "Used - Mint"; const span2 = document.createElement("span"); span2.textContent = "Missouri (2 miles)"; txtData.appendChild(h6); txtData.appendChild(h2); txtData.appendChild(span); tileListing.appendChild(taskItem); tileListing.appendChild(txtData); aggregate.push([leftbtn,rightbtn,0,fillImgAnchor]) return tileListing } let TLS = document.createElement('div') TLS.id='TLS' TLS.className='long' for (let i = 0; i < 10; ++i) { TLS.appendChild(gIndivListing(['/images/ass.jpeg','/images/ass.jpeg','/images/ass.jpeg','/images/ass.jpeg'],4)) }
Aggregate Minimal Variables
let SLI=0 let aggregate=[] function gIndivListing(imgList, imgLen) { const tileListing = document.createElement('div') tileListing.classList.add("tile-listing"); const leftbtn = document.createElement('button') const rightbtn = document.createElement('button') // let qid = 'q_' + SLI.toString(16) leftbtn.className = 'slbtn l o0' leftbtn.id='za'+SLI.toString(16) rightbtn.className = 'slbtn r' rightbtn.id='zb'+SLI.toString(16) SLI++ const taskItem = document.createElement('div') taskItem.className = 'taskItem oh' tileListing.appendChild(leftbtn) tileListing.appendChild(rightbtn) const fillImgAnchor = document.createElement("a"); fillImgAnchor.href = "/imageID"; fillImgAnchor.classList.add("fillImg"); const fillImg = document.createElement("img"); fillImg.src = imgList[0]; fillImg.className = "noselect"; fillImgAnchor.appendChild(fillImg); taskItem.appendChild(fillImgAnchor); const imgWrp = document.createElement('div') imgWrp.classList.add("imgWrp"); for (let i = 1; i < imgLen; i++) { const anchor = document.createElement("a"); anchor.href = "/imageID"; const img = document.createElement("img"); img.src = imgList[i]; img.className = "noselect"; anchor.appendChild(img); imgWrp.appendChild(anchor); } taskItem.appendChild(imgWrp); const txtData = document.createElement('div') txtData.classList.add("txtData"); const h6 = document.createElement("h6"); h6.textContent = "Fujifilm GFX 69s, brand new in box"; const h2 = document.createElement("h2"); h2.classList.add("price"); h2.textContent = "$4,000"; const span = document.createElement("span"); span.textContent = "Used - Mint"; const span2 = document.createElement("span"); span2.textContent = "Missouri (2 miles)"; txtData.appendChild(h6); txtData.appendChild(h2); txtData.appendChild(span); tileListing.appendChild(taskItem); tileListing.appendChild(txtData); aggregate.push([tileListing,0]) return tileListing } let TLS = document.createElement('div') TLS.id='TLS' TLS.className='long' for (let i = 0; i < 10; ++i) { TLS.appendChild(gIndivListing(['/images/ass.jpeg','/images/ass.jpeg','/images/ass.jpeg','/images/ass.jpeg'],4)) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Separate adds
Aggregate
Aggregate Minimal Variables

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

Browser/OS: Chrome 118 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Separate adds	6321.2 Ops/sec
Aggregate	5781.2 Ops/sec
Aggregate Minimal Variables	6042.8 Ops/sec

Array access + add diff types (version: 5)

Comparing performance of: Separate adds vs Aggregate vs Aggregate Minimal Variables

Created: 6 months ago by: Registered User

Jump to the latest result

Separate adds

Aggregate

Aggregate Minimal Variables

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A