问题
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:
- Chrome and Safari have Timeline tab in Web Inspector where you can see all the reflows and redraws made by browser.
- 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"
来源：https://stackoverflow.com/questions/7006152/how-do-we-investigate-how-many-times-a-browser-is-doing-reflows