CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues
There is no guarantee that this hardware compositing will be available
and enabled on a given platform, but if it is available the first time you
use, say, a 3-D transform on an element, then it will be enabled in Chrome.
Currently, the latest versions of Firefox, Safari, IE9+ and the latest version
of Opera all also ship with hardware acceleration. Many developers use
the translateZ hack to do just that. The other side effect of using this hack
is for the element in question to get its own layer, which may or may not
be what you want. It can be very useful to effectively isolate an element
so that it doesn’t affect others as and when it gets repainted. It’s worth
remembering that uploading these textures from system memory to video
memory is not necessarily very quick. The more layers you have, the more
textures need to be uploaded and the more layers that will need to be man-
aged, so it’s best not to overdo it.
Be very careful when manually promoting layers for mobile^14 as it can
be easy to shoot yourself in the foot. Don’t apply it to everything as though
this may improve your performance on desktop, the cost of doing so will
not be equal on mobile where you’re working with a more limited GPU.Avoiding Unnecessary Complexity
The best way to avoid rendering performance issues is to keep things sim-
ple. This advice is particularly important on mobile.
One mistake developers often make when developing for the Web is
opting to create visually complex experiences (like parallax effects). This
involves making visual updates to the page when you get a scroll event.
The big problem here is that scroll events aren’t timed to the visual updates
of the browser (i.e. in a requestAnimationFrame callback). You thereby run
the risk of making multiple updates inside a single render frame which
can introduce jank to desktop and really slow things down on mobile.
Now, if the updates you make are really expensive (which they can be
in the case of visually rich animations and parallax sites) there might be a14 http://smashed.by/null