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
</svg>
5
6
<svg>
7
  <g id="group">
8
    <rect w="10px" h="10px" fill="none" stroke="#CCC" stroke-width="1px"/>
9
    <rect w="10px" h="10px" fill="none" stroke="#CCC" stroke-width="1px"/>
10
  </g>
11
</svg>
Script Preparation code:
 
var elementA = document.getElementById("foo");
var elementB = document.getElementById("bar");
var elementGroup = document.getElementById("group");
Tests:
  • Singles - x/y attribute

     
    var i = 10000;
    while (i--) {
      elementA.setAttribute("x", 5);
      elementA.setAttribute("y", 5);
      elementA.setAttribute("x", 0);
      elementA.setAttribute("y", 0);
      
      elementB.setAttribute("x", 15);
      elementB.setAttribute("y", 15);
      elementB.setAttribute("x", 0);
      elementB.setAttribute("y", 0);
    }
  • Singles - translate

     
    var i = 10000;
    while (i--) {
        elementA.setAttribute("transform", "translate(5px, 5px)");
        elementA.setAttribute("transform", "");
        elementB.setAttribute("transform", "translate(5px, 5px)");
        elementB.setAttribute("transform", "");
    }
  • Single - translate seperate

     
    var i = 10000;
    while (i--) {
        elementA.setAttribute("transform", "translateX(5px) translateY(5px)");
        elementA.setAttribute("transform", "");
        elementB.setAttribute("transform", "translateX(5px) translateY(5px)");
        elementB.setAttribute("transform", "");
    }
  • Single - translate3d

     
    var i = 10000;
    while (i--) {
        elementA.setAttribute("transform", "translate3d(5px, 5px, 0px)");
        elementA.setAttribute("transform", "");
        elementB.setAttribute("transform", "translate3d(5px, 5px, 0px)");
        elementB.setAttribute("transform", "");
    }
  • Group - x/y attribute

     
    var i = 10000;
    while (i--) {
      elementGroup.setAttribute("x", 5);
      elementGroup.setAttribute("y", 5);
      elementGroup.setAttribute("x", 0);
      elementGroup.setAttribute("y", 0);
    }
  • Group - translate

     
    var i = 10000;
    while (i--) {
        elementGroup.setAttribute("transform", "translate(5px, 5px)");
        elementGroup.setAttribute("transform", "");
    }
  • Group - translate seperate

     
    var i = 10000;
    while (i--) {
        elementGroup.setAttribute("transform", "translateX(5px) translateY(5px)");
        elementGroup.setAttribute("transform", "");
    }
  • Group - translate3d

     
    var i = 10000;
    while (i--) {
        elementGroup.setAttribute("transform", "translate3d(5px, 5px, 0px)");
        elementGroup.setAttribute("transform", "");
    }
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

  • Test case name Result
    Singles - x/y attribute
    Singles - translate
    Single - translate seperate
    Single - translate3d
    Group - x/y attribute
    Group - translate
    Group - translate seperate
    Group - translate3d

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: 2 years ago)
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.102 Safari/537.36
Chrome 104 on Linux
View result in a separate tab
Test name Executions per second
Singles - x/y attribute 28.6 Ops/sec
Singles - translate 9.0 Ops/sec
Single - translate seperate 9.4 Ops/sec
Single - translate3d 9.6 Ops/sec
Group - x/y attribute 90.1 Ops/sec
Group - translate 20.4 Ops/sec
Group - translate seperate 20.4 Ops/sec
Group - translate3d 18.1 Ops/sec