Benchmark JS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.js"></script>
<div id="target" style="width: 0px">
Testing StylePropertyMap.set
</div>

<div id="log" style="white-space: pre">
</div>

JavaScript

var suite = new Benchmark.Suite;

const iterations = 50;

// add tests
suite.add('string', function() {
	for (let i = 0; i < iterations; i++) {
  	target.style.transform = 'translate(' + i + 'px, 0px)';
  }
})
.add('typed', function() {
  let translate = new CSSTranslate(CSS.px(0), CSS.px(0));
  let transform = new CSSTransformValue([translate]);
  for (let i = 0; i < iterations; i++) {
  	translate.x.value = i;
  	target.attributeStyleMap.set('transform', transform);
  }
})
// add listeners
.on('cycle', function(event) {
  log.textContent += String(event.target) + '\n';
})
.on('complete', function() {
  log.textContent += 'Fastest is ' + this.filter('fastest').pluck('name');
})
.run();