Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

What are reflows and repaints and how to avoid them

Its becom­ing increas­ingly com­mon for the topic of reflows and repaints to come up when talk­ing about improv­ing page per­for­mance. Although the two of them are closely related, they dif­fer in terms of the impact each can have on browser performance.

Repaint

A repaint occurs when you change the styling of an ele­ment such that it does not effect its lay­out. For e.g. When you change the back­ground color or out­line etc.

Causes of repaints
In essence, any­thing that causes the visual appear­ance of a DOM node to change causes a repaint of that par­tic­u­lar dom node and more than likely all of its chil­dren. Some of the causes or repaints are

  • Scrolling: When you scroll, the browser has to redraw the pix­els at the place that you scrolled. This is one is not as eas­ily avoidable.
  • Chang­ing vis­i­bil­ity or col­ors or back­ground colors.

Reflow

A reflow pri­mar­ily occurs when the lay­out of an ele­ment changes. It causes the browser to recom­pute the dimen­sions and posi­tion­ing of the par­ent and child nodes and some­times even ances­tors and sib­lings. Browser imple­men­ta­tions dif­fer in the way they opti­mize for reflows.

The most impor­tant point to be aware of in this dis­cus­sion is

A reflow is a user-blocking oper­a­tion. It con­sumes rel­a­tively higher CPU time and will result in a degraded user expe­ri­ence on a mobile device if it hap­pens to often.


Causes of reflows
As a rule of thumb — any­thing that affects the cur­rent ‘flow’ of ele­ments in the page will trig­ger a reflow. Some of the causes of reflows are

  • Resiz­ing the window
  • Mov­ing your mobile device(tablet/phone) from land­scape to por­trait mode and vice versa.
  • Chang­ing the font size
  • Cal­cu­lat­ing off­setWidth and offsetHeight
  • Chang­ing the height, width, positions
  • Chang­ing inline styles
  • Using JavaScript meth­ods involv­ing com­puted styles
  • Adding/removing ele­ments from the dom

In most cases, reflows are fol­lowed by a repaint.


Ways to min­i­mize reflows and repaints

  • DOM oper­a­tions involv­ing ani­ma­tions should prefer­able done out of the flow using — posi­tion absolute or fixed.
  • Change classes at the low­est lev­els in the DOM tree.
  • Avoid using inline style. Aside from that, not only are they a night­mare to main­tain, they also increase amount of markup to be delivered(if you are doing server side render).
  • Avoid tables for lay­out. Because the con­tent of any cell in a table can impact the dimen­sions of another cell in the table, it causes mul­ti­ple passes to be ren­dered. There­fore almost any change to a table can cause reflows.
  • When­ever pos­si­ble if new nodes are to be added to the DOM, batch together oper­a­tions that manip­u­late them before insert­ing them into the DOM.
  • When read­ing com­puted styles like off­setWidth and off­setHeight, don’t inter­leave them with a write to those prop­er­ties. e.g. If you already retrieved a node.offsetHeight, batch all other such read oper­a­tions until you write to the dom again. Thats because con­sec­u­tive reads on com­puted styles will not trig­ger a reflow.
  • Debounce the win­dow resize event han­dler, if any.

Let me know in the com­ments if you’d like me to add any more points to this arti­cle and I will be more than will­ing to update it.


Ryan Sukale

Ryan is a UX engineer living in San Francisco, California.