appendChild cycles vs documentFragment (version: 0)

Comparing performance of: appendChild vs append documentFragment vs appendChild w/ requestAnimationFrame vs append documentFragment w/ requestAnimationFrame

Created: 4 years ago by: Registered User
Go to the latest result
HTML Preparation code:
Script Preparation code:
Tests:

Historical Performance Data aggregated from 5 community runs

Desktop Results:
Chrome 5 runs
appendChild w/ requestAnimationFrame
2.9M/s
append documentFragment w/ requestAnimationFrame
234K/s
appendChild
200K/s
append documentFragment
153K/s

Fastest: appendChild w/ requestAnimationFrame (19.0x faster)

View exact numbers
  • ✓ appendChild w/ requestAnimationFrame: 2,914,925 ops/sec
  • • append documentFragment w/ requestAnimationFrame: 233,564 ops/sec
  • • appendChild: 200,320 ops/sec
  • • append documentFragment: 153,126 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results
  • Test case name Result
    appendChild
    append documentFragment
    appendChild w/ requestAnimationFrame
    append documentFragment w/ requestAnimationFrame

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: one year ago)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36
Chrome 135 on Windows
View result in a separate tab
appendChild w/ requestAnimationFrame
3.2M/s
append documentFragment w/ requestAnimationFrame
314K/s
appendChild
200K/s
append documentFragment
153K/s
View exact numbers
Test name Executions per second
✓ appendChild w/ requestAnimationFrame 3,212,219 Ops/sec
append documentFragment w/ requestAnimationFrame 313,781 Ops/sec
appendChild 200,320 Ops/sec
append documentFragment 153,126 Ops/sec

Related benchmarks