Reflow & Repaint

Reflow & Repaint

We mentioned Reflow and Repaint in the last section, now it's time to take a closer look.

Reflowis the process of the browser laying out the page. It happens when you first display the DOM (generally after the DOM and CSS have been loaded), and happens again every time something could change the layout. This is a fairlyexpensive(slow) process.

Repainthappens after reflow as the browser draws the new layout to the screen. This is fairly quick, but you still want to limit how often it happens.

For example, if you add a CSS class to an element, the browser often recalculates the layout of the entire page—that's one reflow and one repaint!

Reflect

Adding a single CSS class could triggerreflow. In your own words, explain why adding some CSS to an element might cause reflow to happen.

SUBMIT

Why did adding a little CSS change cause a reflow? What if adding a class changed the position of the element or caused it to float? The browser won't know for certain (and a complete calculation of the impact of a change could take longer than doing the reflow!)

Let's take a realistic example. Say you're writing the next great blogging platform, and you want to have a "remove spam" button for the administrator. Your HTML looks like this:

<div id="comments">
  <div class="comment"> <!-- some content --> </div>
  <div class="comment"> <!-- some content --> </div>
  <div class="comment"> <!-- some content --> </div>
</div>

When we run the spam filter, we discover comments one and two have to be removed.

If we simply call.removeChild()for each of the two comments that need to be removed, that's one reflow and one repaintfor each change(so a total of 2 reflows and 2 repaints). We could rebuild the whole thing in aDocumentFragmentand replace#comments-- that's the time to rebuild (possibly involving reading files or data), plus at least one reflow and one repaint.

Or we couldhide#comments, delete the spam, and show it again -- that's surprisingly fast, to the cost of one reflow and two repaints (and little else). It's fast because hiding doesn't change the layout, it just erases that section of the screen (1 repaint). When you make the changed section visible again, that's a reflow and a repaint.

In general, if you have to make a group of changes, hide/change all/show is a great pattern to use if the changes are relatively contained.

Virtual DOM

By the way, this is why React and other "virtual DOM" libraries are so popular. You don't make changes to the DOM, but make changes to another structure (a "virtual DOM") and the library calculates the best way to update the screen to match. The catch is you then have to rework your code to use whatever library you're adopting, and sometimes you can do a better job updating the screen yourself (because you understand your own unique situation).

Recap

In this section, we took a brief look at what reflow and repaint are and saw how they can impact the performance of a website.

Reflow is the process of calculating the dimensions and position of page elements. This is a computationally intensive (slow) tasks. Repaint is the process of drawing the pixels to the screen. This is faster than reflow, but is still not a fast process. You want to make sure that your code causes the fewest number of reflows as possible.

Further Research

results matching ""

    No results matching ""