How can I Optimize animation performance in WebKit on Linux?
Linode
Linode Staff
How does one optimize a compiled WebKit browser to take the best advantage of the GPU?
Background
My team and I are working on configuring a Linux box (CentOS) to display full screen HTML with smooth, CSS-driven animations. The box has more than adequate GPU and CPU power and is able to play back these animations easily in Chromium.
However, we are attempting to use pure WebKit to render these animations both by using WebKitGTK+ in Python and by compiling WebKit to a simplistic browser from the source.
Current Status
In both "pure" webkit applications, the animations are vastly slower than on Chromium, which is making us scratch our heads to answer what exactly is different between the two. We understand Chromium uses Blink, a fork of WebKit, and we currently believe the difference in performance is due to the fact that Chromium, Safari, and other WebKit-based browsers each use their own graphics component that is separate from WebKit and Web Core itself, based on what we've read.
It would be great if we could customize our WebKit build to perform even to half the specs of what we're seeing in Chromium but we're not sure where to start.
I'm wondering…
- Is our assumption about the separate graphics component correct?
- What options exist for us to optimize CSS animation performance in a "pure" WebKit browser such as ours?
3 Replies
According to Guil Hernandez's article CSS animations, transforms and transitions are not automatically GPU accelerated, and instead execute from the browser’s slower software rendering engine. So what exactly forces the browser to swap to GPU mode? Many browsers provide GPU acceleration by means of certain CSS rules.
Example:
.cube {
-webkit-transform: translate3d(250px,250px,250px)
rotate3d(250px,250px,250px,-120deg)
scale3d(0.5, 0.5, 0.5);
}