Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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.

like image 289
Pacerier Avatar asked Aug 10 '11 05:08

Pacerier


People also ask

What causes browser repaint?

“Repaint” is the definition given to the process where the browser starts giving the right appearance to the elements that were placed in the Rendered Tree such as background colours or font-sizes. Repainting also happens in situations such as showing an hidden element, animating a node or changing a text colour.

What triggers browser reflow?

Resizing the browser window, using JavaScript methods involving computed styles, adding or removing elements from the DOM, and changing an element's classes are a few of the things that can trigger reflow.

What is the difference between reflow and repaint?

Repaint differs from reflow as reflow involves changes that affect layout of an element, repaint occurs when changes are made to an elements skin, but do not affect its layout like setting outline, visibility, background or color property of an element.


1 Answers

  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.
like image 103
bjornd Avatar answered Oct 09 '22 10:10

bjornd