首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >什么操作和事件会导致浏览器重新绘制其整个视口?

什么操作和事件会导致浏览器重新绘制其整个视口?
EN

Stack Overflow用户
提问于 2011-02-25 06:23:16
回答 2查看 2.7K关注 0票数 2

我正在尝试从google code repository实现wmd编辑器(就像这里在stackoverflow上使用的编辑器一样),但我遇到了一个问题。

当您在文本区域中键入内容时,它将在浏览器中启动两个绘制操作。一个用于重新绘制文本区本身,另一个用于重新绘制预览面板。你可以通过打开chrome检查器,在问题栏中输入一些文本的同时使用时间线标签来观察stackoverflow上的情况。

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

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

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

我在这里讨论的内容的一个视图。

EN

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区域没有很好的定义宽度和高度?我猜如果你给它们宽度和高度,它们不会影响页面中的其他元素

票数 3
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5111277

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档