What actions and events cause a browser to repaint its entire viewport?

Question

I'm trying to implement the wmd-editor from the google code repository (like the one used on stackoverflow right here) and I'm running into an issue.

As you type into the textarea, it kicks off two paint operations in the browser. One to repaint the textarea itself, and one to repaint the preview panel. You can watch this happening on stackoverflow by opening the chrome inspector and using the timeline tab while typing some text into a question field.

But on my page, the browser repaints the entire viewport when it has to do these paint operations. And that takes much longer... about 100ms for each paint operation on my page versus about 1ms on stackoverflow.

In my testing this seems to be css related... I can recreate this behavior in the wmd-new example page by stripping all styles.

My page isn't public yet, but hopefully I can ask in a generic way... what will cause the browser to repaint the entire viewport on a dom change instead of just repainting that portion of the dom?

A view of what I'm talking about here.

Answer 1

AHA! Ah-effing-ha! (forgive the enthusiasm)

The issue is that I was using the box-shadow css property to frame my page. It takes longer to reflow/repaint content when the browser needs to calculate that shadow on each change (~100ms vs ~1ms). And when using wmd-editor, you're updating the dom on each keypress, so that difference adds up. And the effect is most exaggerated when the browser is maximized, as it recalculates the entire viewport.

So maybe that's one of the reasons stackoverflow doesn't have any frames or shadows on the page... just clean edges.

You can see what I mean at this example page. Open it up in firefox, maximized the page, and start typing away. Now use firebug to remove the box-shadow property on the body element, close firebug back up and try again. Big difference.

Thanks to Balpha for his comment, which was spot on.

Answer 2

Check this presentation, around slide 70 and the next ones. They explain a bit what can cause reflow and repaint.

http://www.slideshare.net/nzakas/high-performance-javascript-webdirections-usa-2010

Without the specific code / CSS is hard to answer but I can say something general like, if the fragment DOM that was changed influences other elements in the page :)

Also note that in stackoverflow WMD, when you enter a newline it also causes a whole viewport repaint. So maybe it has something to do with your WYSIWYG area not having width and height well defined? I'm guessing that if you give them width and height they won't affect other elements in the page