Recently I came to know about Reflow and Repaint. How it's affecting web performance. I am writing this post to give insights about reflow and repaint. Before Jumping into the topic, let's understand how the browser renders the website.
- When the user enters the URL, It will fetch the HTML source code from the server
- Browser Parse the HTML source code and convert into the Tokens (<, TagName, Attribute, AttributeValue, >)
- The Tokens will convert into the nodes and will construct the DOM Tree
- The CSSOM Tree will generate from the CSS rules
- The DOM and CSSOM tree will combine into the RenderTree
- The RenderTree are constructed as below:
- Start from the root of the dom tree and compute which elements are visible and their computed styles
- RenderTree will ignore the not visible elements like (meta, script, link) and display:none
- It will match the visible node to the appropriate CSSOM rules and apply them
- Reflow: Calculate the position and size of each visible node
- Repaint: now, the browser will paint the renderTree on the screen
- The Repaint occurs when changes are made to the appearance of the elements that changes the visibility, but doesn't affect the layout
- Eg: Visibility, background color, outline
- Reflow means re-calculating the positions and geometries of elements in the document. The Reflow happens when changes are made to the elements, that affect the layout of the partial or whole page. The Reflow of the element will cause the subsequent reflow of all the child and ancestor elements in the DOM
Both Reflow and Repaints are an expensive operation
According to Opera, most reflows essentially cause the page to be re-rendered:
Reflows are very expensive in terms of performance, and is one of the main causes of slow DOM scripts, especially on devices with low > processing power, such as phones. In many cases, they are equivalent to laying out the entire page again.
Here is a snapshot of how the browser draws user interface on the screen.
- Adding, Removing, Updating the DOM nodes
- Hiding DOM Element with display: none (both reflow and repaint will occur)
- Hiding DOM Element with visibility: hidden (only repaint will occur, because no layout or position change)
- Moving, animating a DOM node
- Resizing the window
- Changing the font style
- Adding or removing Stylesheet
- Script manipulating the DOM
var bstyle = document.body.style; // cache
bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; // another reflow and a repaint
bstyle.color = "blue"; // repaint only, no dimensions changed
bstyle.backgroundColor = "#fad"; // repaint
bstyle.fontSize = "2em"; // reflow, repaint
// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode('dude!'));The strategy to reduce the negative effects of reflows/repaints on the user experience is to simply have fewer reflows and repaints and fewer requests for style information, so the browser can optimize reflows. How to go about that?
- Don't change individual styles, one by one. Best for sanity and maintainability is to change the class names, not the styles. If the styles are dynamic, edit the cssText property
// bad
var left = 10,
top = 10;
el.style.left = left + "px";
el.style.top = top + "px";
// better
el.className += " theclassname";
// or when top and left are calculated dynamically...
// better
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";-
Batch DOM Changes
- Use a documentFragment to hold temp changes
- Clone, update, replace the node
- Hide the element with display: none (1 reflow, 1 repaint), add 100 changes, restore the display (total 2 reflow, 2 repaint)
-
Don't ask for computed styles repeatedly, cache them into the variable
- Multiple reads/writes (like for the height property of an element)
- Writes, then reads, from the DOM, multiple times causing document reflows.
- Read(cached), write(invalidate layout), read(trigger layout).
- To fix: read everything first then write everything.
- Multiple reads/writes (like for the height property of an element)
-
Resources:
Chrome provides a great tool that helps us to figure out what is going on with our code, how many reflows (layout) and repaint do we have, and more details about the memory, events, etc.
var box1Height = document.getElementById('box1').clientHeight;
document.getElementById('box1').style.height = box1Height + 10 + 'px';
var box2Height = document.getElementById('box2').clientHeight;
document.getElementById('box2').style.height = box2Height + 10 + 'px';
var box3Height = document.getElementById('box3').clientHeight;
document.getElementById('box3').style.height = box3Height + 10 + 'px';
var box4Height = document.getElementById('box4').clientHeight;
document.getElementById('box4').style.height = box4Height + 10 + 'px';
var box5Height = document.getElementById('box5').clientHeight;
document.getElementById('box5').style.height = box5Height + 10 + 'px';
var box6Height = document.getElementById('box6').clientHeight;
document.getElementById('box6').style.height = box6Height + 10 + 'px';
document.getElementById('box1').style.height = box1Height + 10 + 'px';
document.getElementById('box2').style.height = box2Height + 10 + 'px';
document.getElementById('box3').style.height = box3Height + 10 + 'px';
document.getElementById('box4').style.height = box4Height + 10 + 'px';
document.getElementById('box5').style.height = box5Height + 10 + 'px';
document.getElementById('box6').style.height = box6Height + 10 + 'px';
var box1Height = document.getElementById('box1').clientHeight;
var box2Height = document.getElementById('box2').clientHeight;
var box3Height = document.getElementById('box3').clientHeight;
var box4Height = document.getElementById('box4').clientHeight;
var box5Height = document.getElementById('box5').clientHeight;
var box6Height = document.getElementById('box6').clientHeight;
Shouldn't the
Optimized Codesection read:?