MeasureThat.net

Run results for: firstChild vs childNodes

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36
Chrome 110
Windows
Desktop
2 years ago
Test name Executions per second
firstChild 46665.7 Ops/sec
childNodes[0] 46896.5 Ops/sec
HTML Preparation code:
​x
 
1
<html>
2
​
3
<body>
4
    <div id="from"></div>
5
    <div id="target"></div>
6
</body>
7
​
8
</html>
Script Preparation code:
 
var from = document.getElementById('from');
var target = document.getElementById('target');
Tests:

  • firstChild

     
    from.innerHTML = `
    <div name='a'></div>
    <div name='b'><div name='e'></div></div>
    <div name='c'></div>
    <div name='d'></div>
    `;
    target.innerHTML = '';
    ​
    ​
    while (from.firstChild) {
      target.appendChild(from.firstChild);
    }
    ​

  • childNodes[0]

     
    from.innerHTML = `
    <div name='a'></div>
    <div name='b'><div name='e'></div></div>
    <div name='c'></div>
    <div name='d'></div>
    `;
    target.innerHTML = '';
    ​
    ​
    while (from.childNodes.length > 0) {
      target.appendChild(from.childNodes[0]);
    }