{Carrer web log} ←

About Repaint and Reflow in JavaScript

Tuesday, February 08, 2011 { 10 Comments }

Recently I stumbled at this Google Documentation - REST from JavaScript realizing how little web developers are aware about JavaScript performance. I heard about Repaint and Reflow mainly from the work of Stoyan Stefanov and Nicholas Zakas, so I’m writing this short article to help raise the awareness about Repaint and Reflow and JavaScript performance in general.

So what is Reflow?

A picture is worth a thousand words and probably the video is worth a thousand pictures :)

Here is the video:


Reflow is the process by which the geometry of the layout engine’s formatting object are computed – Chris Waterson, Mozilla

"Repaint - also known as redraw - is what happens whenever something is made visible when it was not previously visible, or vice versa, without altering the layout of the document. An example would be when adding an outline to an element, changing the background color, or changing the visibility style. Repaint is expensive in terms of performance, as it requires the engine to search through all elements to determine what is visible, and what should be displayed." – Opera

Basically Reflow is layout change and Repaint color change.

So you get the picture Repaint and Reflow are highly expensive operation for the browser. So you need to minimize the number of the Repaints and Reflows when you do DOM manipulations.

Let’s take the example that I mentioned previously:

So every time we use insert HTML into the DOM structure we probably triggers reflow. Maybe this isn’t the best example that shows pure resizing of the layout, but we can avoid accessing the DOM multi times.
// before

function hndlr(response) {
for (var i = 0; i < response.items.length; i++) { var item = response.items[i]; // in production code, item.htmlTitle should have the HTML entities escaped. document.getElementById("content").innerHTML += "<br>" + item.htmlTitle; } }

// after – calling innerHTML just once

function hndlr(response) {
var html = " ";
var y = response.items.length;
for (var i = 0; i < y; i++) { var item = response.items[i]; html += "<br>" + item.htmlTitle; } // making just one Reflow document.getElementById("content").innerHTML = html }

Here are more case studies and other examples:

Rendering: repaint, reflow/relayout, restyle

The new game show: "Will it reflow?"

Writing Efficient JavaScript

When does JavaScript trigger reflows and rendering?

Repaint and reflow

10 Responses to “About Repaint and Reflow in JavaScript”

1. //  Unknown // 2/08/2011

   What you say is mostly true, but it's important to remember that most modern browsers don't do repaints and reflows instantly anymore.
   
   They wait a short short while to see if more changes are being made, meaning, if you do several changes in a loop, it's most likely gonna fall under the same reflow.  

2. //  Vladimir // 2/08/2011

   @Drakim: You are absolutely right about the modern browsers, I did some tests on Chrome with Speed Tracer and the results are almost the same. But the main point was to optimize multi calls to the DOM. Especially the IE is sensitive when you are crossing "the bridge" over and over again.  

3. //  pomeh // 2/09/2011

   This comment has been removed by the author.  

4. //  pomeh // 2/09/2011

   Not only you call innerHTML once, but you call document.getElementById once too ! Minimizing the number of DOM request and caching those request is also a very good thing to do. For me, it is more important than the innerHTML stuff, but I'm curious to see what performance tests says about that :)
   
   
   Also, about IE crossing "the bridge" as you said, you may like this little article http://www.gnegg.ch/2010/10/how-to-kill-ie-performance/
   It just kill me too !  

5. //  Vladimir // 2/10/2011

   @Romain: Thank you for sharing your experience and the link  

6. //  Website Designers // 2/21/2011

   This short article very big information provide for you. You are saying mostly true.
   Your experience so mind blowing and link very usefully. Thanks share this important Experience.  

7. //  Javascript Countdown Timer // 3/12/2011

   very cool & good js tips for beginners, thank you very much for sharing.  

8. //  Brett Widmann // 4/24/2011

   This was a really interesting article! Thanks for all the great information.  

9. //  Abhi // 10/05/2012

   I think you have error here - "Basically Reflow is layout change and Reflow color change."
   
   Shouldnt the latter be "repaint"???  

10. //  Vladimir // 10/05/2012

    @Abhi: Yes, it is repaint. Fixed. Thanks!  

Post a Comment

<< Home