MeasureThat.net

Run results for: Swap element "in-place" with replaceWith() vs .outerHTML

Swap an DOM element with replaceWith() and compare with the .outerHTML method of replacing its content instead. replaceWith() - Pretty one-liner - Breaks element attributes, inline style and scrollHeight/scrollWidth (fully re-render element) .outerHTML - Keeps attributes, inline style and scrollHeight/scrollWidth (partially re-render element) - Breaks previous element references, "hacky" looking and sometimes perceptible (element may flash for a split second)

Go to the benchmark
Run details:
Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/112.0
Firefox 112
Linux
Desktop
one year ago
Test name Executions per second
replaceWith() 2141897.2 Ops/sec
.outerHTML 1419926.0 Ops/sec
HTML Preparation code:
Script Preparation code:
Tests:

  • replaceWith()

  • .outerHTML

;