What actions and events make the browser repaint its entire viewport?

I am trying to implement a wmd editor from a google code repository (for example, the one used in stackoverflow right here), and I "I ran into a problem.

When you enter text in a text box, it launches two drawing operations in the browser. One to redraw the text area itself, and the other to redraw the preview pane. You can see how this happens in stackoverflow by opening the chrome inspector and using the timeline tab, entering text in the question box.

But on my page, the browser redraws the entire viewport when it should perform these operations with paint. And it takes much longer ... about 100 ms for each paint operation on my page versus about 1 ms in stackoverflow.

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

My page has not been published yet, but I hope I can set a general way ... what will cause the browser to repaint the entire viewport to change dom instead of just repainting this part of dom?

A look at what I'm talking about. enter image description here

+3
source share
2 answers

Aha! Ai-vigorous ha! (excuse my enthusiasm)

, box-shadow css . / , (~ 100 ~ 1 ). wmd- dom , . , , .

, , stackoverflow ... .

, . firefox, . firebug, box-shadow body, firebug . .

, .

+5

70 . , .

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

/CSS , - , DOM, , :)

, stackoverflow WMD . , , WYSIWYG ? , ,

+3

Source: https://habr.com/ru/post/1794572/


All Articles