<svg>
<rect id="foo" w="10px" h="10px" fill="none" stroke="#C60" stroke-width="1px"/>
<rect id="bar" w="10px" h="10px" fill="none" stroke="#C60" stroke-width="1px"/>
</svg>
<svg>
<g id="group">
<rect w="10px" h="10px" fill="none" stroke="#CCC" stroke-width="1px"/>
<rect w="10px" h="10px" fill="none" stroke="#CCC" stroke-width="1px"/>
</g>
</svg>
var elementA = document.getElementById("foo");
var elementB = document.getElementById("bar");
var elementGroup = document.getElementById("group");
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);
}
var i = 10000;
while (i--) {
elementA.setAttribute("transform", "translate(5px, 5px)");
elementA.setAttribute("transform", "");
elementB.setAttribute("transform", "translate(5px, 5px)");
elementB.setAttribute("transform", "");
}
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", "");
}
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", "");
}
var i = 10000;
while (i--) {
elementGroup.setAttribute("x", 5);
elementGroup.setAttribute("y", 5);
elementGroup.setAttribute("x", 0);
elementGroup.setAttribute("y", 0);
}
var i = 10000;
while (i--) {
elementGroup.setAttribute("transform", "translate(5px, 5px)");
elementGroup.setAttribute("transform", "");
}
var i = 10000;
while (i--) {
elementGroup.setAttribute("transform", "translateX(5px) translateY(5px)");
elementGroup.setAttribute("transform", "");
}
var i = 10000;
while (i--) {
elementGroup.setAttribute("transform", "translate3d(5px, 5px, 0px)");
elementGroup.setAttribute("transform", "");
}
--enable-precise-memory-info
flag.
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 |
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 |
Based on the provided benchmark results, I will analyze and provide an answer.
Analysis
The benchmark results show the execution speed of different tests performed by Chrome 104 on a Linux desktop. The tests are:
The results are presented as a list of objects, each containing metadata such as the RawUAString (browser string), Browser, DevicePlatform, OperatingSystem, ExecutionsPerSecond, and TestName.
Observations
Answer
Based on the benchmark results, I can answer the following questions:
Please let me know if you would like me to clarify or expand on these observations!