Benchmark: createContextualFragment vs innerHTML asd982jiosjajklsdjkfl

HTML Preparation code:

<div id='test'></div>

Script Preparation code:

const div = document.getElementById('test');

Tests:

createContextualFragment
const fragment = document.createRange().createContextualFragment(` <div class="product-details__wrapper"> <div class="product-details__alert"></div> <div class="product-details__left-column"> <div class="product-details__gallery"></div> </div> <div class="product-details__right-column"> <div class="product-details__header"></div> <div class="product-details__price"></div> <div class="product-details__gallery"></div> <div class="product-details__short-description"></div> <div class="product-details__configuration"> <div class="product-details__options"></div> <div class="product-details__quantity"></div> <div class="product-details__buttons"> <div class="product-details__buttons__add-to-cart"></div> <div class="product-details__buttons__add-to-wishlist"></div> </div> </div> <div class="product-details__description"></div> <div class="product-details__attributes"></div> </div> </div> `); div.appendChild(fragment)
innerHTML
div.innerHTML = ` <div class="product-details__wrapper"> <div class="product-details__alert"></div> <div class="product-details__left-column"> <div class="product-details__gallery"></div> </div> <div class="product-details__right-column"> <div class="product-details__header"></div> <div class="product-details__price"></div> <div class="product-details__gallery"></div> <div class="product-details__short-description"></div> <div class="product-details__configuration"> <div class="product-details__options"></div> <div class="product-details__quantity"></div> <div class="product-details__buttons"> <div class="product-details__buttons__add-to-cart"></div> <div class="product-details__buttons__add-to-wishlist"></div> </div> </div> <div class="product-details__description"></div> <div class="product-details__attributes"></div> </div> </div> `

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createContextualFragment
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 8 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:144.0) Gecko/20100101 Firefox/144.0

Browser/OS: Firefox 144 on Linux

View result in a separate tab

innerHTML

35K/s

createContextualFragment

22K/s

View exact numbers

Test name	Executions per second
✓ innerHTML	34,540 Ops/sec
createContextualFragment	22,067 Ops/sec

createContextualFragment vs innerHTML asd982jiosjajklsdjkfl (version: 1)

checks fragments

Comparing performance of: `createContextualFragment vs innerHTML`

Created: one year ago by: Guest

Go to the latest result

createContextualFragment

innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

createContextualFragment vs innerHTML asd982jiosjajklsdjkfl (version: 1)

checks fragments

Comparing performance of: createContextualFragment vs innerHTML

Created: one year ago by: Guest

Go to the latest result

createContextualFragment

innerHTML

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `createContextualFragment vs innerHTML`