className vs getAttribute('class') (SVG)

JavaScript performance comparison

Test case created by Joshua Peek

Info

Test className property access with SVG edgecase vs reading attribute.

Preparation code

<div class="foo bar"></div>
<svg width="200" height="200">
  <circle class="foo bar" r="3" cx="20" cy="20"></circle>
</svg>

<script>
function classNameProperty(el) {
  var className = el.className;
  if (className) {
    if (typeof className === 'string') {
      return className.split(/\s/);
    } else if (typeof className === 'object' && 'baseVal' in className) {
      return className.baseVal.split(/\s/);
    }
  }
}

function classNameAttribute(el) {
  var className = el.getAttribute('class');
  if (className) {
    return className.split(/\s/);
  }
}

var el  = document.querySelector('div.foo.bar');
var svg = document.querySelector('circle.foo.bar');
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Access element className property
classNameProperty(el)
pending…
Get element class attribute
classNameAttribute(el)
pending…
Access svg className property
classNameProperty(svg)
pending…
Get svg class attribute
classNameAttribute(svg)
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment