Run results for: Create div template

Run details:

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

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

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

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

Run results for: Create div template

createBox0

createBox1

createBox2