Run results for: replaceChild VS removeChild + insertBefore VS insertBefore + removeChild

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser: Chrome 128

Operating system: Linux

Device Platform: Desktop

Date tested: 2 months ago

Test name	Executions per second
replaceChild near start	583059.4 Ops/sec
replaceChild near end	444212.4 Ops/sec
removeChild + insertBefore near start	347346.8 Ops/sec
removeChild + insertBefore near end	347779.9 Ops/sec
insertBefore + removeChild near start	363523.9 Ops/sec
insertBefore + removeChild near end	359959.5 Ops/sec
insertBefore + removeChild near start (variant 2)	356730.3 Ops/sec
insertBefore + removeChild near end (variant 2)	347792.4 Ops/sec

HTML Preparation code:

<div id="parent"></div>

Script Preparation code:

var parent = document.getElementById(
  "parent"
);
var oldChildren = new Array();

var childNumber = 30;
var edgeGap = 3;
var startIdx = 0 + edgeGap;
var endIdx = childNumber - 1 - edgeGap;

function createDivWithText(text) {
  var div = document.createElement(
    "div"
  );
  var textNode = document.createTextNode(
    "" + text
  );
  div.appendChild(textNode);
  return div;
};

var child;
var i = 0;
while (i++ < childNumber) {
  child = createDivWithText(i);
  parent.appendChild(child);
  oldChildren.push(child);
};

var newChild = createDivWithText("new");
var idx;

Tests:

replaceChild near start
idx = startIdx; parent.replaceChild( newChild, oldChildren[idx] ); parent.replaceChild( oldChildren[idx], newChild );
replaceChild near end
idx = endIdx; parent.replaceChild( newChild, oldChildren[idx] ); parent.replaceChild( oldChildren[idx], newChild );
removeChild + insertBefore near start
idx = startIdx; parent.removeChild( oldChildren[idx] ); parent.insertBefore( newChild, oldChildren[idx + 1] ); parent.removeChild( newChild ); parent.insertBefore( oldChildren[idx], oldChildren[idx + 1] );
removeChild + insertBefore near end
idx = endIdx; parent.removeChild( oldChildren[idx] ); parent.insertBefore( newChild, oldChildren[idx + 1] ); parent.removeChild( newChild ); parent.insertBefore( oldChildren[idx], oldChildren[idx + 1] );
insertBefore + removeChild near start
idx = startIdx; parent.insertBefore( newChild, oldChildren[idx] ); parent.removeChild( oldChildren[idx] ); parent.insertBefore( oldChildren[idx], newChild ); parent.removeChild( newChild );
insertBefore + removeChild near end
idx = endIdx; parent.insertBefore( newChild, oldChildren[idx] ); parent.removeChild( oldChildren[idx] ); parent.insertBefore( oldChildren[idx], newChild ); parent.removeChild( newChild );
insertBefore + removeChild near start (variant 2)
idx = startIdx; parent.insertBefore( newChild, oldChildren[idx + 1] ); parent.removeChild( oldChildren[idx] ); parent.insertBefore( oldChildren[idx], oldChildren[idx + 1] ); parent.removeChild( newChild );
insertBefore + removeChild near end (variant 2)
idx = endIdx; parent.insertBefore( newChild, oldChildren[idx + 1] ); parent.removeChild( oldChildren[idx] ); parent.insertBefore( oldChildren[idx], oldChildren[idx + 1] ); parent.removeChild( newChild );

Run results for: replaceChild VS removeChild + insertBefore VS insertBefore + removeChild

Comparison of different options to replace DOM element.

replaceChild near start

replaceChild near end

removeChild + insertBefore near start

removeChild + insertBefore near end

insertBefore + removeChild near start

insertBefore + removeChild near end

insertBefore + removeChild near start (variant 2)

insertBefore + removeChild near end (variant 2)