Run results for: nodes vs attributes vs nodeValue string for READING DOM data storage benchmark

Run details:

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

Browser: Chrome 95

Operating system: Linux

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
read nodes with 7 child nodes	2360951.5 Ops/sec
read attribute with 7 attributes	5696153.0 Ops/sec
read nodevalue with 7 string attributes	5985540.5 Ops/sec
read nodes with 3 child nodes	4324015.0 Ops/sec
read attribute with 3 attributes	5649327.0 Ops/sec
read nodevalue with 3 string attributes	6498278.0 Ops/sec
read nodes with 2 child nodes	5281006.5 Ops/sec
read attribute with 2 attributes	5736351.0 Ops/sec
read nodevalue with 2 string attributes	6711741.0 Ops/sec
obj with 7 entries	15410868.0 Ops/sec
read nodes with 4 child nodes backwards	5282860.0 Ops/sec
read nodes with 7 child nodes using children and go straight to position	6039582.0 Ops/sec
read nodes with 7 child nodes and base on position	6555451.0 Ops/sec

HTML Preparation code:

<div style='display: none'>
    <div id='node'>
      <name>cat</name>
      <not>blank</not>
      <not1>blank</not1>
      <not2>blank</not2>
      <not3>blank</not3>
      <not4>blank</not4>
      <type>bat</type>
    </div>
    <div id='attr' name='cat' type='bat' not='blank' not1='blank' not2='blank' not3='blank' not4='blank'></div>
  <div id='node2'><data>[name]cat[not]blank[not1]blank[not2]blank[not3]blank[not4]blank[type]bat[</data></div>
  
    <div id='nodeS'>
      <name>cat</name>
      <not>blank</not>
      <type>bat</type>
    </div>
    <div id='attrS' name='cat' type='bat' not='blank'></div>
  <div id='nodeS2'><data>[name]cat[not]blank[type]bat[</data></div>

    <div id='nodeS0'>
      <name>cat</name>
      <type>bat</type>
    </div>
    <div id='attrS0' name='cat' type='bat'></div>
  <div id='nodeS02'><data>[name]cat[type]bat[</data></div>
  
    <div id='nodeB0'>
      <name>cat</name>
      <not>blank</not>
      <type>bat</type>
      <not1>blank</not1>
    </div>
</div>

Script Preparation code:

var node = document.getElementById('node')
var attr = document.getElementById('attr')
var node2 = document.getElementById('node2')

var nodeS = document.getElementById('nodeS')
var attrS = document.getElementById('attrS')
var nodeS2 = document.getElementById('nodeS2')

var nodeS0 = document.getElementById('nodeS0')
var attrS0 = document.getElementById('attrS0')
var nodeS02 = document.getElementById('nodeS02')

var nodeB0 = document.getElementById('nodeB0')

var obj = { name:'cat', not:'blank', not1:'blank', not2:'blank', not3:'blank', not4:'blank', type:'bat' }

Tests:

read nodes with 7 child nodes
let elem = node.firstElementChild; let n; do { if ( elem.nodeName === 'TYPE' ) { n = elem.nodeValue; break; } } while (elem = elem.nextElementSibling)
read attribute with 7 attributes
let n = attr.getAttribute('type');
read nodevalue with 7 string attributes
let t = node2.firstElementChild.firstChild.nodeValue; let s = t.indexOf('[type]') let n = t.substring(s+6, t.indexOf('[', s+6) )
read nodes with 3 child nodes
let elem = nodeS.firstElementChild; let n; do { if ( elem.nodeName === 'TYPE' ) { n = elem.nodeValue; break; } } while (elem = elem.nextElementSibling)
read attribute with 3 attributes
let n = attrS.getAttribute('type');
read nodevalue with 3 string attributes
let t = nodeS2.firstElementChild.firstChild.nodeValue; let s = t.indexOf('[type]') let n = t.substring(s+6, t.indexOf('[', s+6) )
read nodes with 2 child nodes
let elem = nodeS0.firstElementChild; let n; do { if ( elem.nodeName === 'TYPE' ) { n = elem.nodeValue; break; } } while (elem = elem.nextElementSibling)
read attribute with 2 attributes
let n = attrS0.getAttribute('type');
read nodevalue with 2 string attributes
let t = nodeS02.firstElementChild.firstChild.nodeValue; let s = t.indexOf('[type]') let n = t.substring(s+6, t.indexOf('[', s+6) )
obj with 7 entries
let n = obj['type']
read nodes with 4 child nodes backwards
let elem = nodeB0.lastElementChild; let n; do { if ( elem.nodeName === 'TYPE' ) { n = elem.nodeValue; break; } } while (elem = elem.previousElementSibling)
read nodes with 7 child nodes using children and go straight to position
let n = node.children[6].nodeValue
read nodes with 7 child nodes and base on position
let elem = node.firstElementChild; let n; for (let i = 0; i<10; i++) { if ( i === 6 ) { n = elem.nodeValue; break; } elem = elem.nextElementSibling }

Run results for: nodes vs attributes vs nodeValue string for READING DOM data storage benchmark

read nodes with 7 child nodes

read attribute with 7 attributes

read nodevalue with 7 string attributes

read nodes with 3 child nodes

read attribute with 3 attributes

read nodevalue with 3 string attributes

read nodes with 2 child nodes

read attribute with 2 attributes

read nodevalue with 2 string attributes

obj with 7 entries

read nodes with 4 child nodes backwards

read nodes with 7 child nodes using children and go straight to position

read nodes with 7 child nodes and base on position