Benchmark: replaceChild VS removeChild + insertBefore VS insertBefore + removeChild

replaceChild VS removeChild + insertBefore VS insertBefore + removeChild (version: 1)

Comparison of different options to replace DOM element.

Comparing performance of: replaceChild near start vs replaceChild near end vs removeChild + insertBefore near start vs removeChild + insertBefore near end vs insertBefore + removeChild near start vs insertBefore + removeChild near end vs insertBefore + removeChild near start (variant 2) vs insertBefore + removeChild near end (variant 2)

Created: 2 months ago by: Registered User

Jump to the latest result

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 );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
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)

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

It seems like you're sharing benchmark results from different test cases for the `insertBefore` and `removeChild` methods in JavaScript's DOM API.

The tests appear to cover various scenarios, including:

1. `replaceChild near start`: Replacing an element with another one close to the beginning of a list.
2. `replaceChild near end`: Replacing an element with another one close to the end of a list.
3. `insertBefore + removeChild near start`: Inserting an element before an existing one and then removing that new element.
4. `insertBefore + removeChild near end`: Inserting an element before an existing one and then removing that new element, which is placed near the end of the list.

The benchmark results show a ranking of these tests in terms of execution speed (measured in executions per second). The test with the highest execution speed appears to be `replaceChild near start`, followed by `insertBefore + removeChild near start` and `removeChild + insertBefore near start`.

However, without knowing more about the context or requirements behind these benchmarks, it's difficult to provide any further insights. If you'd like to discuss the implications of these results or need help with a specific problem, feel free to ask!

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
replaceChild near start	1546511.4 Ops/sec
replaceChild near end	1547919.5 Ops/sec
removeChild + insertBefore near start	1130899.6 Ops/sec
removeChild + insertBefore near end	1128735.1 Ops/sec
insertBefore + removeChild near start	1167384.9 Ops/sec
insertBefore + removeChild near end	1159186.5 Ops/sec
insertBefore + removeChild near start (variant 2)	1122403.9 Ops/sec
insertBefore + removeChild near end (variant 2)	1118795.2 Ops/sec

Related benchmarks:

replaceChild VS removeChild + insertBefore VS insertBefore + removeChild (version: 1)

Comparison of different options to replace DOM element.

Created: 2 months ago by: Registered User

Jump to the latest result

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)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):