CSS Variables vs. Inline Styles

JavaScript performance comparison

Test case created by David Khourshid

Preparation code

<style>
  ._test {
    color: var(--color);
  }
</style>
<div class="_test-container"></div>
      
<script>
Benchmark.prototype.setup = function() {
  var testContainer = document.querySelector('._test-container');
  
  testContainer.innerHTML = `
    <span class="_test">
      <span class="_test">
    </span>
  `.repeat(100);
  
  document.body.appendChild(testContainer);
  
  window.testContainer = testContainer;
  window.testNodes = document.querySelectorAll('._test');

};

Benchmark.prototype.teardown = function() {
  var testContainer = document.querySelector('._test-container');
  
  testContainer.innerHTML = '';

};
</script>

Preparation code output

<style> ._test { color: var(--color); } </style> <div class="_test-container"></div>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Inline styles (style)
for (var i = 0; i < testNodes.length; i++) {
    testNodes[i].style = "color: green";
  }
pending…
Inline styles (setProperty)
for (var i = 0; i < testNodes.length; i++) {
    testNodes[i].style.setProperty('color', 'green');
  }
pending…
CSS Variables
testContainer.style.setProperty('--color', 'green');
pending…

Revisions

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

0 Comments