Benchmark: Parse attributes of DOM element

HTML Preparation code:

<div readonly="true" value="231" autocomplete="email" id="t1"></div>

Script Preparation code:

HTMLElement.prototype.getBoolAttr = function getBoolAttr(attr) {
    const a = this.getAttribute(attr);
    if (a == null) {
        return this[attr];
    }
    return a !== "false";
};

HTMLElement.prototype.getNumAttr = function getNumAttr(attr) {
    const a = this.getAttribute(attr);
    if (a == null || a === "") {
        return this[attr];
    }
    const v = +a;
    if (Number.isNaN(v)) {
        console.error(`${this.tagName}. Expected number for attribute [${attr}] but pointed '${a}'`);
        return this[attr];
    }
    return v;
};

HTMLElement.prototype.getStrAttr = function getStrAttr(attr) {
    const a = this.getAttribute(attr);
    if (a == null) {
        return this[attr];
    }
    return a;
};

HTMLElement.prototype.getAttr = function getAttr(attr, type = "string") {
    const a = this.getAttribute(attr);
    if (a == null) {
        return this[attr];
    }
    switch (type) {
        case "bool":
            return a !== "false";
        case "number": {
            const v = +a;
            if (Number.isNaN(v)) {
                console.error(`${this.tagName}. Expected number for attribute [${attr}] but pointed '${a}'`);
                return this[attr];
            }
            return v;
        }
        default:
            return a; // string
    }
};

HTMLElement.prototype.getAttr2 = function getAttr(attr, type = 0) {
    const a = this.getAttribute(attr);
    if (a == null) {
        return this[attr];
    }
    switch (type) {
        case 1:
            return a !== "false";
        case 2: {
            const v = +a;
            if (Number.isNaN(v)) {
                console.error(`${this.tagName}. Expected number for attribute [${attr}] but pointed '${a}'`);
                return this[attr];
            }
            return v;
        }
        default:
            return a; // string
    }
};

Tests:

getBoolAttr
const el = document.getElementById("t1") el.test = el.getBoolAttr("readonly")
getAttr
const el = document.getElementById("t1") el.test2 = el.getAttr("readonly", 'bool')
getAttr2
const el = document.getElementById("t1") el.test3 = el.getAttr("readonly", 1)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getBoolAttr
getAttr
getAttr2

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Browser/OS: Chrome 109 on Windows

View result in a separate tab

Test name	Executions per second
getBoolAttr	4923277.0 Ops/sec
getAttr	4881712.0 Ops/sec
getAttr2	4927834.0 Ops/sec

Parse attributes of DOM element (version: 0)

Comparing performance of: getBoolAttr vs getAttr vs getAttr2

Created: one year ago by: Registered User

Jump to the latest result

getBoolAttr

getAttr

getAttr2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A