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 -
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.