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

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.

Answers:

Answer
  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

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

Answer

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"

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.