1

I have looked into this article by Nicole Sullivan and it mentions about quite a few tools that can help in measuring browser reflows :

  • Lindsey Simon at Google wrote a bookmarklet that tests reflow times on any browser. Fantastic. (Note: all that shaking is normal!)
  • John Resig wrote a bookmarklet to visualize paint events.
  • Kyle Scholz created this tool to visualize paint events before onload.
  • Alex at Yoono has created the XUL profiler.

I tried to use the first tool but it did not lead me anywhere .Then tried the second tool but I couldn't find any info from that.Then I installed the third tool as an add on to FF but that doesn't give me anything in screen shot tab. The fourth one gives me a 404 error .

So my question to all the gurus here in SO is which is the best available tool to measure browser reflows ? I am hoping that some new tools are out there since that article was published.

Inquisitive
  • 7,476
  • 14
  • 50
  • 61
  • this have probably been answered here http://stackoverflow.com/questions/7006152/how-do-we-investigate-how-many-times-a-browser-is-doing-reflows – Arcadien Jul 04 '12 at 12:37
  • @Arcadien I have already tried the point 2 in the given in the answer and that doesn't work for me .It is actually the third point in my question . – Inquisitive Jul 04 '12 at 12:44
  • What do you mean by measure? Do you want to know the number of reflows? If yes, use the global [`mozPaintCount`](https://developer.mozilla.org/en/DOM/window.mozPaintCount) variable. – Rob W Jul 04 '12 at 13:05
  • @RobW I want to measure the number of reflows and how much time each one is taking . – Inquisitive Jul 04 '12 at 13:15
  • @Subhra Number of reflows -> [`window.mozPaintCount`](https://developer.mozilla.org/en/DOM/window.mozPaintCount). Measure time -> [`mozAfterPaint`](https://developer.mozilla.org/en/Gecko-Specific_DOM_Events#MozAfterPaint) event. – Rob W Jul 04 '12 at 13:17
  • @RobW the wiki on MDN says this "MozAfterPaint is a Gecko-only event, and for compatibility (and performance) reasons should not be used outside chrome code, such as extensions." – Inquisitive Jul 04 '12 at 13:51

1 Answers1

0

The Chrome Developer Tools CTRL+SHFT+I have something like that I guess... Click the timeline tab and click the record button in the footer, see what happens to your page!

On the right all records are shown and when you hover over a record it highlights the element on your page.

Ties
  • 5,726
  • 3
  • 28
  • 37
  • I specially need it for firefox . I have edited the question. – Inquisitive Jul 04 '12 at 12:50
  • Oh then this question might help you: http://stackoverflow.com/questions/4802836/firefox-counterpart-to-google-chrome-developer-tools-timeline ;) – Ties Jul 04 '12 at 13:31