什么操作和事件会导致浏览器重新绘制其整个视口？
我正在尝试从google code repository实现wmd编辑器(就像这里在stackoverflow上使用的编辑器一样)，但我遇到了一个问题。
当您在文本区域中键入内容时，它将在浏览器中启动两个绘制操作。一个用于重新绘制文本区本身，另一个用于重新绘制预览面板。你可以通过打开chrome检查器，在问题栏中输入一些文本的同时使用时间线标签来观察stackoverflow上的情况。
但在我的页面上，当浏览器必须执行这些绘制操作时，它会重新绘制整个视口。这需要更长的时间。在我的页面上，每个绘制操作大约需要100ms，而在stackoverflow上大约需要1ms。
在我的测试中，这似乎是与css相关的。我可以在wmd-new example页面中通过剥离所有样式来重新创建此行为。
我的页面还没有公开，但希望我能以一种通用的方式询问……什么会导致浏览器在dom更改时重新绘制整个视区，而不是仅仅重新绘制dom的那一部分？
我在这里讨论的内容的一个视图。
回答 2
Stack Overflow用户
发布于 2011-02-26 00:44:19
啊哈！啊--该死--哈！(请原谅我的热情)
问题是我使用了box-shadow css属性来框住我的页面。当浏览器需要计算每个更改的阴影时，回流/重绘内容需要更长的时间(~100ms vs ~1ms)。当使用wmd-editor时，你会在每次按键时更新dom，所以差异就会累积起来。当浏览器最大化时，效果最为夸张，因为它会重新计算整个视口。
所以这可能是stackoverflow在页面上没有任何框架或阴影的原因之一……只是干净的边缘。
您可以在这个example page中看到我的意思。在firefox中打开它，最大化页面，然后开始输入。现在使用firebug删除body元素上的box-shadow属性，关闭firebug back up，然后重试。差别很大。
感谢Balpha的评论，这是非常准确的。
Stack Overflow用户
发布于 2011-02-25 06:29:05
请查看此演示文稿，大约是幻灯片70和下一张幻灯片。他们解释了一些可能导致回流和重绘的原因。
http://www.slideshare.net/nzakas/high-performance-javascript-webdirections-usa-2010
如果没有特定的代码/ CSS很难回答，但我可以说一些一般性的东西，比如，如果更改的片段DOM影响了页面中的其他元素:)
另请注意，在stackoverflow WMD中，当您输入换行符时，也会导致整个视口重新绘制。所以可能是因为你的WYSIWYG区域没有很好的定义宽度和高度？我猜如果你给它们宽度和高度，它们不会影响页面中的其他元素
https://stackoverflow.com/questions/5111277
复制相似问题
腾讯云开发者
