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

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0

Browser: Firefox 130

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
replaceChild near start	12508.1 Ops/sec
replaceChild near end	9785.2 Ops/sec
removeChild + insertBefore near start	302309.0 Ops/sec
removeChild + insertBefore near end	306355.0 Ops/sec
insertBefore + removeChild near start	309702.9 Ops/sec
insertBefore + removeChild near end	309463.4 Ops/sec
insertBefore + removeChild near start (variant 2)	309094.1 Ops/sec
insertBefore + removeChild near end (variant 2)	310809.6 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)