问题标签 [reflow]

我对复杂的 CSS 相当陌生，并且有一个问题——我有一个页面，它在页面底部放置了一个浮动元素。它通过设置底部：0 和位置：绝对来实现。

当用户将浏览器调整为非常小的尺寸时，此元素会覆盖页面上的其他内容。

理想情况下，该元素将继续以正常和大尺寸浮动在浏览器底部，但如果浏览器窗口缩小得太小，浏览器将强制滚动条，而不是进一步移动浮动元素。

本质上，我想告诉浏览器——无论窗口多小，永远不要渲染小于 800x600 的页面。

什么样的活动会触发带有 DOM 的网页回流？

似乎有不同的观点。根据http://www.nczonline.net/blog/2009/02/03/speed-up-your-javascript-part-4/，它发生了

• 添加或删除 DOM 节点时。
• 当您动态应用样式时（例如 element.style.width="10px"）。
• 当您检索必须计算的度量时，例如访问 offsetWidth、clientHeight 或任何计算的 CSS 值（通过 DOM 兼容浏览器中的 getComputedStyle() 或 IE 中的 currentStyle）。

但是，根据http://dev.opera.com/articles/view/efficient-javascript/?page=3，仅当已经有回流操作排队时才进行测量触发回流。

有人有更多的想法吗？

我在点击一个表单按钮时重新执行导入的 js 文件，该按钮调用一个函数将 DOM 元素插入页面（模拟 ajx 回调函数的 exe）。DOM 插入会导致页面刷新，重新请求服务器的所有文件。

函数调用没什么大不了的：

DOM 更新代码的目标 DIV 是：

我在此页面上放置了一个警报，在函数尝试插入新的 LI [奇怪的是，LI 出现一瞬间然后消失] 后，页面刷新被触发，我在页面上的警报重新执行。

// 也许我在这台计算机上遇到了浏览器问题，或者我只是一个新的脚本编写者 // 看不到问题...任何评论表示赞赏。

我有一个页面，用户可以在其中动态添加文件上传框。添加框会更改它们所在的 div 的高度，但其下方 div 的某些元素仍保留在同一位置，因此它们开始与新的 DOM 元素重叠。

这在 IE8、Firefox、Chrome 中可以正常工作。如何强制 IE7 使用新的 DHTML 重排页面？

我制定的最佳解决方案是：

但它不适用于最大化窗口（它会恢复窗口）。

假设我使用 动态创建一个 DIV document.createElement，添加一些内部文本，并想确定它的高度和宽度。我可以看到在将DIV添加到DOM树之前，和等属性为offsetWidth0 offsetHeight，这是预期的。一旦以编程方式将其添加到树中，我是否可以期望这些属性立即“准备就绪”，或者是否存在重绘/重排可能会延迟并稍后发生的环境？

我认为答案类似于“JavaScript 解释器是单线程的，并且由 appendChild 触发的重绘/重排事件是该线程的一部分，并在继续下一条语句之前完成”......但是有人可以检查我的理解吗？

这篇Opera 文章有很多我正在寻找的内容，但不清楚它是如何特定于 Opera 的。在任何情况下，应用程序开发人员似乎都可以假设在进行测量时（例如通过访问 offsetWidth）正确地发生了任何所需的重绘/重排。

我想知道使用 Javascript 为滚动条设置动画是否会触发浏览器重排。

不同的浏览器实现有什么区别吗？

window.pageXOffset & window.pageYOffset
document.documentElement.scrollLeft & document.documentElement.scrollTop
document.body.scrollLeft & document.body.scrollTop

谢谢！

我对回流+重绘之间的区别有点不清楚（如果有任何区别的话）

似乎 reflow 可能会改变各种 DOM 元素的位置，而 repaint 只是渲染一个新对象。例如，在移除元素时会发生回流，而在更改其颜色时会发生重绘。

这是真的？

我想知道是否有 DOM 事件或其他方式来确定浏览器何时完成解析/渲染 CSS 的基准测试目的。我正在尝试优化 CSS 选择器，并且需要一种方法来测量绘图/渲染/重排时间。

我需要在我编写的附加组件中对整个网页文档进行繁重的 DOM 操作。我想尽量减少回流，这样我所有的操作只会发生一次回流。删除 body 元素，进行操作然后再次插入它不是一种选择，因为这会重新评估所有<script>元素。目前我将 body 的可见性设置为'none'操作之前并在之后恢复 display 的值。不过，我不确定这是否是解决此问题的最佳方法。

有没有更好的办法？当然，它可能是 Firefox 特定的代码。毕竟它是一个 Firefox 附加组件。

我有两个 div 元素，一个环绕另一个。然后我使用 JavaScript 在运行时为外部 div 添加边框。以某种方式，基于 webkit 的浏览器在更改外边框时不会进行重排。最终结果看起来很丑 - 内部 div 溢出外部。这是 HTML 代码： [div id="outer][div id="inner" style="border: solid blue; 高度：50px;"][/div][/div]

事件处理程序也很简单： document.getElementById("outer").setAttribute("style", "border:solid green")

当我发现这一点时，我简直不敢相信，因为这是一项微不足道的回流任务。还是我错过了什么？有没有人遇到类似的问题，有什么解决方法？谢谢。