how do we investigate how many times a browser is doing reflows?

Question

Is there a web developer functionality/tool that allows us to know how many times a browser is doing reflows?

basically I want to have some sort of feedback/informa

Answer 1

1. Chrome and Safari have Timeline tab in Web Inspector where you can see all the reflows and redraws made by browser.
2. Firefox has MozAfterPaint event. It can help you understand which regions of the page and when repainted by the browser. Firebug Paint Events add-on can be helpful here. It shows repaint events in FireBug console.

Answer 2

Sometime after late 2013, the reflow logging is built into Firefox logging.

https://mail.mozilla.org/pipermail/firefox-dev/2013-October/001044.html

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

Answer 3

You can track reflow information if you have a custom built Firefox.

see below: https://developer.mozilla.org/en-US/docs/Debugging_Frame_Reflow

How to build Firefox with enable debugging mode: https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions