Run results for: typeof + className vs. getAttribute for SVGs and normal elements

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:68.0) Gecko/20100101 Firefox/68.0

Browser: Firefox 68

Operating system: Mac OS X 10.14

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
getAttribute	718679.0 Ops/sec
typeof + className	801775.8 Ops/sec

HTML Preparation code:

<div id="foo"></div>
<svg id="bar" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" aria-label="Search Icon"><path fill="" d="M14.556019 15.61668c-3.437834 2.899823-8.583187 2.73052-11.82163-.507923-3.417087-3.417086-3.417088-8.95728 0-12.374368 3.417087-3.417088 8.957282-3.417087 12.374368 0 3.238443 3.238443 3.407746 8.383796.507922 11.82163l5.148932 5.148932c.292891.292891.292894.767767 0 1.06066-.292893.292894-.767769.292891-1.06066 0L14.55602 15.61668zm-.507922-1.568583c2.8313-2.8313 2.831298-7.42175 0-10.253048-2.831298-2.831298-7.421747-2.831301-10.253048 0-2.831301 2.8313-2.831298 7.42175 0 10.253048 2.831298 2.831298 7.421747 2.8313 10.253048 0z"></path></svg>

Tests:

getAttribute only
var element = document.getElementById("foo"); var element2 = document.getElementById("bar"); var class_name; var i = 1000; while (i--) { if (i % 2 === 0) { class_name = element.getAttribute("class"); } else { class_name = element2.getAttribute("class"); } }
ternary typeof check to determine getAttribute or className
var element = document.getElementById("foo"); var element2 = document.getElementById("bar"); var class_name; var i = 1000; while (i--) { if (i % 2 === 0) { class_name = typeof element.className === "object" ? element.getAttribute("class") : element.className; } else { class_name = typeof element2.className === "object" ? element2.getAttribute("class") : element2.className; } }

Run results for: typeof + className vs. getAttribute for SVGs and normal elements

getAttribute only

ternary typeof check to determine getAttribute or className