我正在尝试从 google code repository 实现 wmd 编辑器(就像这里在stackoverflow上使用的一样)我遇到了一个问题。
当您在 textarea 中键入内容时,它会在浏览器中启动两个绘制操作。一种用于重绘文本区域本身,另一种用于重绘预览面板。您可以通过打开 chrome 检查器并在问题字段中输入一些文本时使用时间线选项卡,在 stackoverflow 上看到这种情况。
但是在我的页面上,当浏览器必须执行这些绘制操作时,它会重新绘制整个视口(viewport)。这需要更长的时间……我页面上的每个绘制操作大约需要 100 毫秒,而在 stackoverflow 上大约需要 1 毫秒。
在我的测试中,这似乎与 css 相关...我可以通过剥离所有样式在 wmd-new 示例页面中重新创建此行为。
我的页面尚未公开,但希望我能以一种通用的方式问...什么会导致浏览器在 dom 更改时重新绘制整个视口(viewport),而不是仅仅重新绘制 dom 的那部分?
我在这里谈论的内容。
最佳答案
啊哈!啊-效果-哈! (原谅热情)
问题是我使用 box-shadow css 属性来构建我的页面。当浏览器需要计算每次更改的阴影时(~100ms vs ~1ms),重排/重绘内容需要更长的时间。并且当使用 wmd-editor 时,您会在每次按键时更新 dom,因此差异会增加。当浏览器最大化时,效果最为夸张,因为它会重新计算整个视口(viewport)。
所以也许这就是stackoverflow在页面上没有任何框架或阴影的原因之一......只是干净的边缘。
您可以在 example page 看到我的意思。 .在 Firefox 中打开它,最大化页面,然后开始输入。现在使用 firebug 删除 body 元素上的 box-shadow 属性,关闭 firebug 并重试。大不同。
感谢 Balpha 的评论,他的评论很到位。
关于javascript - 哪些 Action 和事件会导致浏览器重新绘制其整个视口(viewport)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5111277/