HTML and CSS Reference
In-Depth Information
Debugging Hardware Acceleration
With the code of the basic transitions covered, take a look at the mechanics of how the
transitions run on the device and are composited. Here are a few tips to remember when
using accelerated compositing:
• Reduce the quantity of layers
• Keep layers as small as possible
• Update layers infrequently
• Tailor layer compositing to your purpose
• Use trial and error; testing is important
To begin debugging, fire up a couple of WebKit-based browsers and your IDE of choice.
Using Safari
First, start Safari from the command line to make use of some debugging environment
variables. I use a Mac, so the example commands might differ from those for your OS.
Open the Terminal, and type the following (or just skip Safari and use the Chrome
settings in next section):
$> export CA_COLOR_OPAQUE=1
$> export CA_LOG_MEMORY_USAGE=1
$> /Applications/Safari.app/Contents/MacOS/Safari
These lines start Safari with a couple of debugging helpers.
CA_COLOR_OPAQUE
shows you
which elements are actually composited or accelerated, while
CA_LOG_MEMORY_USAGE
shows you how much memory you are using when sending drawing operations to the
backing store. This tells you exactly how much strain you are putting on the mobile
device and possibly give hints to how your GPU usage might be draining the target
device's battery.
You may also start Safari after running the following command, which gives you a full
Debug menu with all available options, as shown in
Figure 3-4
:
defaults write com.apple.Safari
IncludeInternalDebugMenu 1
