Benchmark: Create div template

Tests:

createBox0
let div = document.createElement('div'); let bboxDims = document.createElement('span'); const x1k = document.createElement('b') x1k.textContent = 'x1' const x2k = x1k.cloneNode() x2k.textContent = 'x2' const y1k = x1k.cloneNode() y1k.textContent = 'y1' const y2k = x1k.cloneNode() y2k.textContent = 'y2' div.className='bbox-elem' bboxDims.className='bbox-dims' x2k.className='b2' y2k.className='b2' bboxDims.insertAdjacentElement('beforeend', x1k) bboxDims.insertAdjacentElement('beforeend', document.createElement('span')) bboxDims.insertAdjacentElement('beforeend', x2k) bboxDims.insertAdjacentElement('beforeend', document.createElement('span')) bboxDims.insertAdjacentElement('beforeend', document.createElement('br')) bboxDims.insertAdjacentElement('beforeend', y1k) bboxDims.insertAdjacentElement('beforeend', document.createElement('span')) bboxDims.insertAdjacentElement('beforeend', y2k) bboxDims.insertAdjacentElement('beforeend', document.createElement('span')) div.insertAdjacentElement('beforeend', bboxDims) return div
createBox1
let div = document.createElement('div'); let bboxDims = document.createElement('span'); let bbt = bboxDims.cloneNode() const x1k = document.createElement('b') x1k.textContent = 'x1' const x2k = x1k.cloneNode() x2k.textContent = 'x2' const y1k = x1k.cloneNode() y1k.textContent = 'y1' const y2k = x1k.cloneNode() y2k.textContent = 'y2' div.className='bbox-elem' bboxDims.className='bbox-dims' x2k.className='b2' y2k.className='b2' bboxDims.insertAdjacentElement('beforeend', x1k) bboxDims.insertAdjacentElement('beforeend', bbt) bboxDims.insertAdjacentElement('beforeend', x2k) bboxDims.insertAdjacentElement('beforeend', bbt.cloneNode()) bboxDims.insertAdjacentElement('beforeend', document.createElement('br')) bboxDims.insertAdjacentElement('beforeend', y1k) bboxDims.insertAdjacentElement('beforeend', bbt.cloneNode()) bboxDims.insertAdjacentElement('beforeend', y2k) bboxDims.insertAdjacentElement('beforeend', bbt.cloneNode()) div.insertAdjacentElement('beforeend', bboxDims) return div
createBox2
let div = document.createElement('div'); let bboxDims = document.createElement('span'); let bbt = bboxDims.cloneNode() const x1k = document.createElement('b') x1k.textContent = 'x1' const x2k = x1k.cloneNode() x2k.textContent = 'x2' const y1k = x1k.cloneNode() y1k.textContent = 'y1' const y2k = x1k.cloneNode() y2k.textContent = 'y2' div.className='bbox-elem' bboxDims.className='bbox-dims' x2k.className='b2' y2k.className='b2' bboxDims.append(x1k,bbt,x2k,bbt.cloneNode(),document.createElement('br'),y1k,bbt.cloneNode(),y2k,bbt.cloneNode()) div.insertAdjacentElement('beforeend', bboxDims) return div

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createBox0
createBox1
createBox2

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/108.0.0.0 Safari/537.36

Browser/OS: Chrome 108 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
createBox0	196041.9 Ops/sec
createBox1	230926.2 Ops/sec
createBox2	195550.2 Ops/sec

Create div template (version: 2)

Comparing performance of: createBox0 vs createBox1 vs createBox2

Created: one year ago by: Registered User

Jump to the latest result

createBox0

createBox1

createBox2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A