frontend - How to differentiate between reflow and repaint in chrome developer tools? -
how differentiate between repaint
a repaint occurs when changes made elements affect visibility not layout. example, opacity, background-color, visibility, , outline. repaints expensive because browser must check visibility of other nodes in dom — 1 or more may have become visible beneath changed element.
and reflow
reflows have bigger impact. refers re-calculation of positions , dimensions of elements, leads re-rendering part or of document. changing single element can affect children, ancestors, , siblings.
using chrome developer tools(or other similar tools)?
in chrome performance tab see repaint. repaint
Comments
Post a Comment