Run results for: Array access + add diff types

Run details:

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: Chrome 118

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Separate adds	6303.7 Ops/sec
Aggregate	6163.8 Ops/sec
Aggregate Minimal Variables	5722.9 Ops/sec

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)) }

Run results for: Array access + add diff types

Separate adds

Aggregate

Aggregate Minimal Variables