Visualizing WebKit’s hardware accelerationFebruary 8th, 2011
Want to know which parts of your web page are hardware accelerated on Safari or Mobile Safari? It’s easy to find out.
Just start Safari with…
$ CA_COLOR_OPAQUE=1 /Applications/Safari.app/Contents/MacOS/Safari
..and all hardware-accelerated layers will show up in red. Try apple.com or Every Time Zone or Freelancember.
Same goes for Mobile Safari, in the iOS Simulator:
$ CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.app/Contents/MacOS/iPhone Simulator
Try surfing over to HTML5 Mobile Pro, and see the Core Animation layers in all their red-tinted glory.
You can mess around even more with the various Core Animation debugging flags. For example, if you specify
CA_PRINT_TREE=1 you’ll get complete dumps of the rendering tree that Core Animation uses to composite the image, and
CA_COLOR_FLUSH=1 will show you when hard-accelerated parts of your page are updated/redrawn.
(Hat tip to @thijs for this handy tip!)Tweet