Run details:
Mozilla/5.0 (iPhone; CPU iPhone OS 15_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Mobile/15E148 Safari/604.1
Mobile Safari 15
iOS 15.6.1
Mobile
2 years ago
Test name Executions per second
Single - opacity - setAttribute - opacity 164.8 Ops/sec
Single - opacity - style.opacity 200.0 Ops/sec
Group - opacity - setAttribute - Fill 401.2 Ops/sec
Group - opacity - style.opacity 378.8 Ops/sec
HTML Preparation code:
x
 
1
<svg>
2
    <rect id="foo" w="10px" h="10px" fill="none" stroke="#C60" stroke-width="1px" />
3
    <rect id="bar" w="10px" h="10px" fill="none" stroke="#C60" stroke-width="1px" />
4
5
    <g id="group">
6
        <rect w="10px" h="10px" fill="none" stroke="#CCC" stroke-width="1px" />
7
        <rect w="10px" h="10px" fill="none" stroke="#CCC" stroke-width="1px" />
8
    </g>
9
</svg>
Script Preparation code:
 
var elementA = document.getElementById("foo");
var elementB = document.getElementById("bar");
var elementGroup = document.getElementById("group");
Tests:
  • Single - opacity - setAttribute - opacity

     
    var i = 10000;
    while (i--) {
      elementA.setAttribute("opacity", i);
      elementB.setAttribute("opacity", i);
    }
  • Single - opacity - style.opacity

     
    var i = 10000;
    while (i--) {
      elementA.style.opacity = i;
      elementB.style.opacity = i;
    }
  • Group - opacity - setAttribute - Fill

     
    var i = 10000;
    while (i--) {
      elementGroup.setAttribute("opacity", i);
    }
  • Group - opacity - style.opacity

     
    var i = 10000;
    while (i--) {
      elementGroup.style.opacity = i;
    }