哪些操作和事件会导致浏览器重绘其整个视口？
Bob*_*ian 2 javascript css dom wmd wmd-editor
我正在尝试从谷歌代码库(就像在这里的stackoverflow上使用的那个)实现wmd-editor ,我遇到了一个问题.
当您输入textarea时,它会在浏览器中启动两个绘制操作.一个用于重绘textarea本身,另一个用于重新绘制预览面板.您可以通过打开chrome检查器并在问题字段中键入一些文本时使用时间轴选项卡来监视stackoverflow上发生的情况.
但是在我的页面上,浏览器在必须执行这些绘制操作时重新绘制整个视口.这需要更长的时间......在我的页面上每次绘制操作大约需要100ms,而在stackoverflow上大约需要1ms.
在我的测试中,这似乎与css相关......我可以通过剥离所有样式在wmd-new示例页面中重新创建此行为.
我的页面还没有公开,但希望我可以用通用的方式询问...是什么会导致浏览器在dom更改中重新绘制整个视口而不是重新绘制dom的那一部分？
我在这里谈论的是什么.
AHA!啊 - 感觉 -哈!(原谅热情)
问题是我使用box-shadow css属性来构建我的页面.当浏览器需要计算每次更改时的阴影(~100ms vs~1ms)时,重新流/重新绘制内容需要更长的时间.当使用wmd-editor时,你会在每个按键上更新dom,这样就会增加差异.当浏览器最大化时,效果最为夸张,因为它会重新计算整个视口.
所以也许这就是stackoverflow在页面上没有任何框架或阴影的原因之一......只是干净的边缘.
你可以在这个示例页面看到我的意思.在firefox中打开它,最大化页面,然后开始输入.现在使用firebug删除body元素上的box-shadow属性,关闭firebug并重试.很大的区别.
感谢Balpha对他的评论.