998232 - 2D Transform is slow

Status: NEW

(Core :: Layout, defect)

Description

[Vincent Chen [:vichen]]

Attachment: test-2d-transform.html

Test page:
http://ie.microsoft.com/TEStdrive/Performance/MazeSolver/Default.html

The time to complete a 30X30 maze in Firefox is about 2X than in Chrome.
(Firefox: 12-18 seconds Chrome 2-8 seconds on MBP, i7, 16G RAM OSX 10.9.2)

The attached test-2d-transform.html is extracted from MazeSolver, and it proves the bottleneck is in CSS 2D transform.

Method 1:
elem.style.top = 45+ y*12+4+"px";
elem.style.left = 8+ x*12+4+"px";

Method 2:
elem.style.webkitTransform = "translate("+(x*12+4)+"px, "+(y*12+4)+"px)";
elem.style.MozTransform = "translate("+(x*12+4)+"px, "+(y*12+4)+"px)";

If use method 1, the time is < 5 seconds to complete the 30*30 loop, a little faster than Google Chrome.
If use method 2, the time is > 20 seconds and is 4X slower than Chrome.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Note bug 691645?