Run results for: Get Filtered Data Attributes

Run details:

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Mobile Safari/537.36

Browser: Chrome Mobile 119

Operating system: Android

Device Platform: Mobile

Date tested: 2 years ago

Test name	Executions per second
Attributes	534877.1 Ops/sec
dataset	386640.2 Ops/sec

HTML Preparation code:

<div class="foo" id="bar" data-pre-event="abc-def" data-pre-name="bar" data-src="something" data-foo="bar"> some content here </div>

Script Preparation code:

function getAttributes(el) {
    let out = Object.create(null);
    let att = el.attributes;
    for (let i = 0; i < att.length; i++) {
        let el = att[i];
        let t;
        if ((t = el.name.replace('data-pre-', '')) == el.name) {
            // do not add if not properly prefixed
            continue;
        }
        if (t.indexOf('event-') != 0) {
            t = t.replace(/-/gm, '.');
        }
        let val = el.value;
        val = !!val  ? val.toLowerCase() : true;
        out[t] = val;
    }
    return out;
}

function getDataset(el) {
    let out = Object.create(null);
    let x = el.dataset;
  	for(let key in x){
    	let t;
        if ((t = key.replace('data-pre-', '')) == key) {
            // do not add if not properly prefixed
            continue;
        }
       if (t.indexOf('event-') != 0) {
            t = t.replace(/-/gm, '.');
        }
      let val = x[key];
        val = !!val  ? val.toLowerCase() : true;
        
        out[t] = val;
	}
    return out;
}

var element = document.getElementById('bar');

Tests:

Attributes
var att = getAttributes(element)
dataset
var att = getDataset(element)

Run results for: Get Filtered Data Attributes

compare the retrieval of data attributes on an element filtering only certain prefixed attributes

Attributes

dataset