New Perspectives On Web Design

CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues

aPPlY fiX wiThin DevToolS

Now that we have an idea about what’s causing the performance issues,

we can modify the JavaScript file directly in the Sources panel and test our

changes on desktop or our mobile device right away.

In the Sources panel that was opened previously, replace line 43 with

the following code.

movers[m].style.left = ((Math.sin(m + timestamp/1000) + 1) * 500) + 'px';

1. This version computes each image’s left style property on its index in its
   holding array instead of on a layout-dependent property (offsetWidth).


2. Save your changes by pressing Command+S or Control+S.

veRifY wiTh anoTheR ReCoRDing

The animation is clearly faster and smoother than before, but it’s always

good practice to measure the difference with another recording. It should

look something like the recording below.

Try it out. The corrected code for this sample can be found at

http://jsfiddle.net/k4yM3/ and now performs at close to 60fps.