chrome-repaint-optimization

We all know that innerHTML causes browsers to Paint Setup and repaint the document. But there is one hidden optimization that Chrome does that some of us are not aware of. If the innerHTML is setting the same text content again, a repaint is not called. The experiment below explains it -

Let's have a simple HTML markup -

<html>

    <head> </head>

<body>

         <div id=“content”>test</div>

    </body>

</html>

Run this text file in chrome and start the Chrome developers tool. Go to Timeline >>> frames.

The image below shows Timeline view in Chrome developer tool -

 

 

Now click the Record button and refresh the page. You will notice a Paint method invocation as highlighted in the screenshot below -

Now clear the RECORDS  but don’t stop recording. Go to Console tab and try changing the “content” div to same text “Test”.

One cool thing to note here is that in Chrome developer tool , you can get access to the element by just writing its id in the Console, instead of document.getElementById(“content”).

 

 

Now comeback to the Timeline tab and note that there is a only a function call without any Paint Setup and Paint.

 

 

Indeed if the content changes to something else , there will be repaint.

 

The major takeaway from this is that we don’t have to write extra checks to optimize repaint.

But wait! The repaint optimization happens only for textual content, if the same HTML content was set again, the repaint would still occur.

 

 

One thought on “chrome-repaint-optimization

  1. This works only when the innerHTML is actually plain text. If the innerHTML is actually some markup then even without a change the repaint will occur.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

p8gn

Please type the text above:

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>