MeasureThat.net

Run results for: replaceChildren vs textContent + append

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36 Edg/107.0.1418.26
Chrome 107
Windows
Desktop
2 years ago
Test name Executions per second
replaceChildren 116437.5 Ops/sec
textContent + append 120353.9 Ops/sec
Tests:

  • replaceChildren

    AخA
     
    const el = document.createElement('div');
    el.append(
      document.createElement('div'),
      document.createElement('div'),
      document.createElement('div'),
      document.createElement('div'),
      document.createElement('div')
    )
    el.replaceChildren(
      document.createElement('div'),
      document.createElement('div'),
      document.createElement('div'),
      document.createElement('div'),
      document.createElement('div')
    )

  • textContent + append

     
    const el = document.createElement('div');
    el.append(
      document.createElement('div'),
      document.createElement('div'),
      document.createElement('div'),
      document.createElement('div'),
      document.createElement('div')
    )
    el.textContent = '';
    el.append(
      document.createElement('div'),
      document.createElement('div'),
      document.createElement('div'),
      document.createElement('div'),
      document.createElement('div')
    )