2

我正在尝试从google 代码存储库(就像在 stackoverflow 上使用的那样)实现 wmd-editor,但我遇到了一个问题。

当您在 textarea 中键入内容时,它会在浏览器中启动两个绘制操作。一种用于重绘文本区域本身,另一种用于重绘预览面板。您可以通过打开 chrome 检查器并在问题字段中键入一些文本时使用时间线选项卡来观看 stackoverflow 上发生的这种情况。

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

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

我的页面还没有公开,但希望我能以一种通用的方式问......什么会导致浏览器在 dom 更改时重新绘制整个视口,而不是仅仅重新绘制 dom 的那部分?

对我在这里谈论的内容的看法。 在此处输入图像描述

4

2 回答 2

6

啊哈!啊- 效果 -哈!(原谅热情)

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

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

您可以在此示例页面中看到我的意思。在 Firefox 中打开它,最大化页面,然后开始输入。现在使用 firebug 删除 body 元素上的 box-shadow 属性,关闭 firebug 并重试。巨大差距。

感谢 Balpha 的评论,这是正确的。

于 2011-02-25T16:44:18.507 回答
3

检查此演示文稿,大约幻灯片 70 和下一个。他们解释了一些可能导致回流和重绘的原因。

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

如果没有特定的代码/CSS 很难回答,但我可以说一些一般性的话,如果被更改的片段 DOM 会影响页面中的其他元素:)

另请注意,在 stackoverflow WMD 中,当您输入换行符时,它也会导致整个视口重绘。所以也许它与您的所见即所得区域没有明确定义的宽度和高度有关?我猜如果你给它们宽度和高度,它们不会影响页面中的其他元素

于 2011-02-24T22:29:04.580 回答