New Perspectives On Web Design

(C. Jardin) #1
By Addy Osmani CHAPTER 6

having to switch back
and forth with the
Timeline view.
Keep in mind that
just tracking the FPS
counter may lead you to
not notice frames with
intermittent jank. Be
careful when using the
content. It is also worth
noting that FPS on
desktop does not equal
FPS on other devices
and special care should
be taken to profile the
performance there too.


A “Find and Fix” Workflow for Mobile
It’s hard to build a meaningful mobile Web experience without testing
on the actual devices you support. Luckily, modern Web browsers expose
tools that can profile both your rendering performance on desktop as well
as your performance on connected mobile devices. This is done via remote
debugging, which you’ll need to set up before you can profile your pages on
mobile.


SeT uP ReMoTe Debugging


You’ll normally remotely debug your pages over USB. As long as your
mobile device is connected to your development machine, you’ll be able to
profile pages using the Timeline, as well as view and edit HTML, scripts
and styles until you have an optimized page which behaves a little better
on all of your target devices.


The FPS meter showing the page’s current, minimum and
maximum frame rates as well as a histogram of frame
rate variance.
Free download pdf