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

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

vue.js - Create hooks for automated testing -

Add new key value to json node in java -