CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues
- Select the arrow at the top of the tool to begin profiling. Keep the
actions you perform to the bare minimum needed to capture the
slowdown you want to investigate in your page. Anything more will
run the risk of decreasing the readability of your results. - When you’ve completed the interactions you wanted to capture,
click “Stop profiling” or the square-shaped icon at the bottom of the
developer tools to create a report from these results.
The UI Responsiveness tool comes with its own performance Timeline
which you’ll see next. It’s a similar, but slightly different take to the one we
saw in Chrome. Use this to visualize the frame-rate of the page (which IE re-
fers to as visual throughput) and drops in this frame-rate, indicating we’ve
dropped frames or some slowdown has occurred. It also captures how much
of the CPU is being used, but this is less interesting for our purposes.
Next, you can drill down into what specific records correspond to
using the Timeline Details view. The official IE11 developer tools docs cover
the categories listed more comprehensively, but in short this captures: CSS
and HTML parsing; network requests; script evaluation; image decodes;
animation frame callbacks; and of particular interest to us: layout and
rendering. Layout in this context refers to changes to the DOM that caused
the dimensions or position of elements to change and rendering refers to
visual changes to the DOM that caused regions of the page to be
repainted. The details summarized include the dimensions and coordi-
nates of the render layer that was affected.