21

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.

Jim Lewis
  • 43,505
  • 7
  • 82
  • 96
Pacerier
  • 86,231
  • 106
  • 366
  • 634
  • Are you looking for things like Developer Tools in Google Chrome or Firebug? In Developer Tools in Chrome, on the Timeline tab you can click record and see the amount of time spent Loading/Scripting/Rendering. Would the timeline for Rendering give you what you are looking for ? – arunkumar Aug 10 '11 at 05:10
  • @arunkumar it is somewhat like that, but I need to be able to profile for just a single element and not the whole page. Like say you know firebug we can select a single element and see all the styles for just one particular element? that kind of thing, and once that element is selected I would like to see the rendering bar for just that element, ignoring the rest. – Pacerier Aug 10 '11 at 05:19
  • By "reflow", you mean "redirect", right? – Gaurav Gupta Aug 10 '11 at 06:07
  • @Gaurav reflow: http://stackoverflow.com/questions/6893032/do-reflows-occur-once-for-each-applied-style – Pacerier Aug 10 '11 at 06:20
  • I was looking at http://code.google.com/chrome/extensions/trunk/experimental.devtools.panels.html to see if you could access the information from the Developer tools, but it looks like the granular information about what element is being rendered is not available there. Looking at your earlier question in the link above, one option might be to checkout the code for Chrome or FF. Locate the code involved with handling reflows and put in your own logging there. There might be some profilers out there that allow you to do this, but I wasn't able to find any. – arunkumar Aug 10 '11 at 06:36

3 Answers3

12
  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.
bjornd
  • 22,397
  • 4
  • 57
  • 73
  • I couldn't get the MozAfterPaint to work. do you know what does the *chrome* mean in: The MozAfterPaint event is no longer sent to web content by default for the time being; it is still sent to chrome, however. *Source: https://developer.mozilla.org/en/Gecko-Specific_DOM_Events#MozAfterPaint* – Pacerier Aug 10 '11 at 16:05
  • i am aware of the timeline tab however what i would like to have is to select a single element and be able to view the reflows for that particular element (and not for the whole page of course..). what a pity.. Paint Events add-on only work with FireFox 3 – Pacerier Aug 10 '11 at 16:07
  • I doubt this is possible. I mean I don't know any tools for that. The only possibility I see is to modify the code of the browser to add some reflow logging functionality. – bjornd Aug 10 '11 at 16:14
  • could you elaborate on *modifying the code of the browser* ? i've no idea what you are trying to say.. – Pacerier Aug 10 '11 at 16:50
  • http://blog.mozilla.com/gen/2009/04/09/how-to-make-your-own-gecko-reflow-video/ - here you can find rough explanation of how one guy made a visualization of Firefox reflow process. He just compiled his own version of ff which is able to log all reflows. – bjornd Aug 10 '11 at 17:22
7

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

S.L. Barth is on codidact.com
  • 8,198
  • 71
  • 51
  • 66
David Shim
  • 710
  • 6
  • 4
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"

lulalala
  • 17,572
  • 15
  • 110
  • 169