Opacity vs. RGBA (v4)

Revision 4 of this benchmark created on

Description

Simple bench to try to determine whether RGBA or opacity/background-color are faster for simple leaf nodes in a DOM Tree.

Preparation HTML

<div id="testNode"></div>
<script>
  var testNode = document.getElementById('testNode');
  testNode.background = 'red';
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
backgroundColor/opacity
testNode.style.opacity = '0.9';
testNode.offsetHeight; // forces flushing of styles?
ready
RGBA backgroundColor
testNode.style.backgroundColor = 'rgba(255,0,0,0.9)';
testNode.offsetHeight; // forces flushing of styles?
ready
RGB backgroundColor
testNode.style.backgroundColor = 'rgb(255,0,0)';
testNode.offsetHeight; // forces flushing of styles?
ready
Hex backgroundColor
testNode.style.backgroundColor = '#FF0000';
testNode.offsetHeight; // forces flushing of styles?
ready

Revisions

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