Reflow logging has landed in m-c

Paul Rouget paul at mozilla.com
Fri Oct 25 11:08:40 UTC 2013


That's useful for web developers, but also for Firefox and B2G developers.
It has landed today (you will need to wait tomorrow to see it in nightly).

Screenshot: http://i.imgur.com/jEZ06Wt.png

# What is a reflow:

  When the layout is invalidated (CSS or DOM changes), gecko needs to re-compute
  the position of some nodes. This computation doesn't happen immediatly. It's
  triggered for various reasons. For example, if you do "node.getBoundingClientRect()",
  gecko needs to do this computation. This computation is called a "reflow".

  Reflows are expensive. Avoiding reflow is important for responsiveness.

# What it looks like:

  It looks like that: http://i.imgur.com/jEZ06Wt.png
  Some reflows come with a JS stack. Clicking on it will open the JS debugger (or
  view source) and highlight the line that caused the reflow. You can add a
  breakpoint (also, see bug 821829 for "break on reflow").

# How to use it:

  For Firefox development:

  In browser console (Tools > Web Developer > Browser Console), in the [CSS] menu, select "Log".

  For B2G development:

  Use the App Manager (http://mzl.la/156w8ps), enable certified apps debugging
  (http://mzl.la/1aJiK9b), and in the device tab, select the app you want to debug
  (homescreen, settings, keyboard, …). Click on "debug", and in the console, in the
  [CSS] menu, select "Log".

# Why can't I see a JS stack?

  Most of the time, a reflow doesn't come with a JS stack because the reflow
  hasn't been triggered by a JS call, but because a paint was needed. We want
  to be able to show the reason of a reflow in this case, but we don't have
  this information yet. See bug 929469.

-- Paul



More information about the firefox-dev mailing list