Firefox OS/Performance/App Performance Validation

This page outlines a simple process for manually auditing and improving the performance of an app.

Section listed first have a higher priority. This means that for example fixing over-invalidation and responsiveness will lead to vastly improved checker-boarding thus should be performed first when possible.

1. Over-invalidation

Platform Contact: Layout team

What does it mean: Over-invalidation means that we're repainting content that isn't changing. This leads to higher CPU usage & bandwidth.

Verification Steps:

• In the Developer menu turn on 'Flash repainted area'.
• Perform all common interactions with the app. Look for areas of the page that are flashing but where the content hasn't changed.
• Examples:

Good: GIF invalidates every frame, links invalidates on mouse over because of style change. Static content is not repainted	Good: When scrolling, new content is painted but it doesn't repaint once on the screen.
Bad: Clicking repaints the whole page.

• Common issues: Please add any common issues to this list. Currently empty.

2. Reflows

Platform Contact: Layout team

What does it mean: Reflowing the page is the process of deciding where all the DOM elements will be positioned the page. Any changes to the page that has the potential of effecting the flow of the page will have to reflow the page again. The larger the DOM the longer this can potentially take.

Reflowing is expected as the page/app is being loaded. Once the page is ready, app author should carefully consider what interactions should make changes that can affects the flow of the document. If changes to the page are required they should happen in the same frame/refresh tick as all changes will be validated at the same time.

Sync reflow is when the position information (like scrollLeft/scrollTop/clientWidth/clientHeight) of a DOM node is queried when there are pending changes made to the flow of the document. This will prevent reflow from being delayed to the next refresh tick, block all current execution and reflow the document.

Sometimes reflows can be avoided by using CSS transforms that don't affect the flow of the page.

Verification Steps:

• In the Developer menu -> Developer HUD, turn on the 'Reflow' counter.
• Perform all common interactions with the app. Perform reflows only when necessarily i.e. the structure of the app must change.

More information: http://paulrouget.com/e/fxoshud/

3. Event loop responsiveness

Platform Contact: Varies, use profilers to narrow down the issue or contact the Performance team.

What does it mean: See http://paulrouget.com/e/fxoshud/ for an excellent description. Keeping the event loop delay is important to having a smooth and responsive app.

This step is very important. It's only listed 3rd to make sure the simplest problems have been resolved first.

Verification Steps:

• In the Developer menu -> Developer HUD, turn on the 'Jank' counter.
• Perform all common interactions with the app. Track the 'Jank' number for each of the interaction. When that number is above 10ms your app is at risking of dropping frames. Once that number is 100ms painting will fall behind and input will be delayed. 500ms+ indicate that this interaction will be noticeable jerky.
• Understand the worse case responsiveness for each interaction of your app. Consider various workload for your app (like 5000 pictures).

Debugging:

• Profile the app' main thread, good if you can't make an educated guess: https://developer.mozilla.org/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler#Profiling_Boot_to_Gecko_%28with_a_real_device%29
• For Javascript related slowdown: Add function duration logging throughout the code.
• Disable some functionality of your app to see if that reduces the event loop lag (jank).

4. Load Time

Platform Contact: Varies, use profilers to narrow down the issue or contact the Performance team.

What does it mean: The duration, in millisecond, require to load the app.

Verification Steps:

5. Layer Tree

Platform Contact: Layout & Graphics

What does it mean:

Verification Steps:

6. Styles

Platform Contact: Layout

What does it mean:

Verification Steps:

7. Checkerboarding

Platform Contact: Graphics, verify previous steps first

What does it mean:

Verification Steps:

8. Compositor FPS

Platform Contact: Graphics

What does it mean:

Verification Steps:

9. Memory usage

Platform Contact: Memshrink

What does it mean:

Verification Steps:

10. Profiling

Platform Contact: Performance Team & Graphics

What does it mean:

Verification Steps:

11. Power usage

Platform Contact: Performance Team

What does it mean:

Verification Steps: