MeasureThat.net
  • Create a benchmark
  • Online Toolsnew
  • About
  • Feedback
  • Buy me a coffeeBuy me a coffee

 innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement (version: 1)

innerHTML vs insertAdjacentHTML vs appendChild vs insertAdjacentElement

Comparing performance of: 1) innerHTML += vs 2) insertAdjacentHTML vs 3) appendChild vs 4) insertAdjacentElement

Created: 2 years ago by: Registered User
Jump to the latest result
Script Preparation code:
Tests:

  • 1) innerHTML +=

  • 2) insertAdjacentHTML

  • 3) appendChild

  • 4) insertAdjacentElement

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results
  • Test case name Result
    1) innerHTML +=
    2) insertAdjacentHTML
    3) appendChild
    4) insertAdjacentElement

    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: 4 days ago)
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
Chrome 124 on Mac OS X 10.15.7
View result in a separate tab
Test name Executions per second
1) innerHTML += 5276626.0 Ops/sec
2) insertAdjacentHTML 3019408.0 Ops/sec
3) appendChild 4101586.0 Ops/sec
4) insertAdjacentElement 3992763.0 Ops/sec