Be the first user to complete this post
|
Add to List |
What are reflows and repaints and how to avoid them
Repaint
A repaint occurs when you change the styling of an element such that it does not effect its layout. For e.g. When you change the background color or outline etc.
Causes of repaints
In essence, anything that causes the visual appearance of a DOM node to change causes a repaint of that particular dom node and more than likely all of its children. Some of the causes or repaints are
Reflow
A reflow primarily occurs when the layout of an element changes. It causes the browser to recompute the dimensions and positioning of the parent and child nodes and sometimes even ancestors and siblings. Browser implementations differ in the way they optimize for reflows.
The most important point to be aware of in this discussion is
A reflow is a user-blocking operation. It consumes relatively higher CPU time and will result in a degraded user experience on a mobile device if it happens to often.
Causes of reflows
As a rule of thumb - anything that affects the current 'flow' of elements in the page will trigger a reflow. Some of the causes of reflows are
In most cases, reflows are followed by a repaint.
Ways to minimize reflows and repaints
Let me know in the comments if you'd like me to add any more points to this article and I will be more than willing to update it.
Also Read:
- window.onload vs document.onload
- A simple requestAnimationFrame example visually explained
- pseudo elements vs pseudo classes
- sessionStorage vs localStorage vs cookie applications