how do we investigate how many times a browser is

问题:

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/information. I don't know how it will be, but perhaps some sort of performance graph that shows the timeline (akin to Google's Speed Tracer) so I can investigate when suddenly at a point the browser is doing an insane amount of reflows so I can point out hey here's a bottleneck, there got to be a bug/bad implementation of something here or something.

回答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.

回答2:

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

回答3:

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"