javascript - What actions and events cause a browser to repaint its entire viewport? - Stack Overflow

admin管理员组

文章数量:1325147

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.

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.

• javascript
• css
• dom
• wmd
• wmd-editor

Share Improve this question Follow asked Feb 24, 2011 at 22:23 Bob RalianBob Ralian 1,96922 gold badges2020 silver badges2929 bronze badges 2

• Are you seeing the in all browsers? Also, is there any transparency or shadowing happening in or around the editor? Anything with an opacity of <1 is always a huge slowdown. – balpha ♦ Commented Feb 25, 2011 at 7:12
• Thanks balpha, your ment was spot-on. It was box-shadow on the body element. Disappointing, as it means I need to change my whole design just to acodate this functionality. But really happy to have found the problem. I was going nuts trying to figure this out. – Bob Ralian Commented Feb 25, 2011 at 16:47

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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 ment, which was spot on.

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

http://www.slideshare/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

本文标签： javascriptWhat actions and events cause a browser to repaint its entire viewportStack Overflow