CSS Variables with without Calc

JavaScript performance comparison

Test case created by Lisi Linhart

Preparation code

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

};

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

};
</script>

Preparation code output

<style> .el { --translation: 100; --translationPx: 100px; --translationPercent: 100%; } </style> <div class="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
Variable + Calc + Px
for (var i = 0; i < testNodes.length; i++) {
testNodes[i].style = "transform: translateY(calc(var(--translation) * 1px))";
}
pending…
Variable + Px
for (var i = 0; i < testNodes.length; i++) {
    testNodes[i].style = "transform: translateY(var(--translationPx))";
  }
pending…
Px
for (var i = 0; i < testNodes.length; i++) {
    testNodes[i].style = "transform: translateY(100px))";
}
pending…
Variable + Calc + Percent
for (var i = 0; i < testNodes.length; i++) {
    testNodes[i].style = "transform: translateY(calc(var(--translation) * 1%))";
  }
pending…
Variable + Percent
for (var i = 0; i < testNodes.length; i++) {
    testNodes[i].style = "transform: translateY(var(--translationPercent))";
  }
pending…
Percent
for (var i = 0; i < testNodes.length; i++) {
    testNodes[i].style = "transform: translateY(100%))";
  }
pending…

Revisions

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

0 Comments