{Carrer web log}


Blog about web design & development

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. // Blogger Drakim // 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. // Blogger 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. // Blogger Romain // 2/09/2011

    This comment has been removed by the author.  

  4. // Blogger Romain // 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. // Blogger Vladimir // 2/10/2011

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

  6. // Anonymous 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. // Anonymous Javascript Countdown Timer // 3/12/2011

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

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

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

  9. // Anonymous 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. // Blogger Vladimir // 10/05/2012

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

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License