javascript - 哪些操作和事件会导致浏览器重绘其整个视口？

时间：2011-02-24 22:23:16

标签： javascript css dom wmd wmd-editor

我正在尝试从google code repository实现wmd-editor（就像在这里的stackoverflow上使用的那样）并且我遇到了一个问题。

当您输入textarea时，它会在浏览器中启动两个绘制操作。一个用于重绘textarea本身，另一个用于重新绘制预览面板。您可以通过打开chrome检查器并在问题字段中键入一些文本时使用时间轴选项卡来监视stackoverflow上发生的情况。

但是在我的页面上，浏览器在必须执行这些绘制操作时重新绘制整个视口。这需要更长的时间......在我的页面上每次绘制操作大约需要100ms，而在stackoverflow上大约需要1ms。

在我的测试中，这似乎与css相关......我可以通过剥离所有样式在wmd-new示例页面中重新创建此行为。

我的页面尚未公开，但希望我能以通用方式询问...什么会导致浏览器在dom更改中重新绘制整个视口而不是重新绘制dom的那部分？

我在这里谈论的是什么。 enter image description here

答案 0 :(得分：5)

AHA！ AH-的艾芬的-HA！（原谅热情）

问题是我使用box-shadow css属性来构建我的页面。当浏览器需要计算每次更改时的阴影（~100ms vs~1ms）时，重新流/重新绘制内容需要更长的时间。当使用wmd-editor时，你会在每个按键上更新dom，这样就会增加差异。当浏览器最大化时，效果最为夸张，因为它会重新计算整个视口。

所以也许这就是stackoverflow在页面上没有任何框架或阴影的原因之一......只是干净的边缘。

你可以在example page看到我的意思。在firefox中打开它，最大化页面，然后开始输入。现在使用firebug删除body元素上的box-shadow属性，关闭firebug并重试。差异很大。

感谢Balpha的评论，这一点已经发布了。

答案 1 :(得分：3)

在幻灯片70和下一张幻灯片周围查看此演示文稿。他们解释了什么可能导致回流和重新粉刷。

没有特定的代码/ CSS很难回答，但是如果更改的片段DOM影响页面中的其他元素，我可以说一般的事情：）

另请注意，在stackoverflow WMD中，当您输入换行符时，它也会导致整个视口重绘。那么也许它与你的WYSIWYG区域有关，没有明确的宽度和高度？我猜测，如果给它们宽度和高度，它们不会影响页面中的其他元素