问题标签 [reflow]

概括

清除表单输入中的文本会导致 Chrome 出现长时间延迟（几秒）。似乎这会导致计算样式的重排或重新计算，但我不确定。Chrome 的 Profiler 和 Timeline 没有提供任何信息。

是什么导致延迟？我怎样才能消除它？这是我的代码中的错误，还是 Chrome 中的错误？

例子

http://jsfiddle.net/jmilloy/dHFsQ/

要导致延迟，请在输入中键入，然后删除文本。当您删除最后一个字符或全选然后删除时，会出现延迟。

要消除延迟，请使用、或row4代替。现在您可以清除输入而不会造成延迟。row1row2row3

笔记

• 延迟取决于n行数。

• 它出现在 Chrome 中，但不在 Firefox 中。

• 它发生在 Linux（Ubuntu/Mint 11）和 Windows 7 中，但不是 OSX。任何人都可以确认吗？

一旦我有一个表现出延迟行为的jsfiddle，我就完全重写了这个问题，并用一个更简单的例子再次重写。

我有一个 wordpress 网站。在下single.php，我有以下body标签

阅读网络上的文章让我确信避免使用内联 CSS 和内联 javascipt。所以我对我的网站进行了重组，以便现在将样式和脚本包含在外部文件中。除了这行代码，因为它确实需要the post id而且我不知道如何在 single.php 之外检索它。

感谢您通常的帮助。

我在计算元素的高度时遇到了一个奇怪的问题。开始时它将位于高度 0，将其设置为原始高度。如果我删除 setTimeout，我总是得到 0 作为高度（即使使用纯 JavaScript）。

有没有办法解决？

到处都写着读取element.offsetWidth会导致元素尺寸的重新计算（甚至是回流？）。

但是，我正在努力使这种效果可见。

在 chrome 中，我希望我能够通过 3 个简单的步骤使其可见：

1. 打开 Chrome 开发工具
2. 转到元素选项卡并选择要导致重新计算/重排的元素
3. 转到时间线选项卡并开始录制
4. 转到控制台并键入$0.offsetWidth

现在，如果我转到时间线选项卡，我会假设看到绘制的回流。然而，我什么也没看到。所以我一定是搞错了。

我制作了一个游戏，您可以在 2d 网格世界（神奇宝贝风格）上行走，而目前您只需从一个瓷砖跳到另一个瓷砖，而不是在其间播放漂亮的行走动画。我现在正在处理那个行走动画，一切正常，只是浏览器的重排/重绘速度不够快。

如果我仔细放大精灵，我可以看到精灵在移动并且只做了他需要做的一半替换。这会产生一种滞后的感觉，这显然是我不想要的。所以我今天用谷歌搜索并了解了重排和重绘，以及浏览器将动画堆叠到特定时间，然后分批执行它们。

我想避免动画的堆叠，所以我在谷歌上搜索，发现了很多对我不起作用的黑客，不幸的是......

我使用了一些技巧，比如请求 offsetTop、隐藏和显示元素，以及其他一些很容易在网上找到的技巧。他们都没有工作。

然后我在这里了解到：http ://dev.opera.com/articles/view/efficient-javascript/?page= 3#reflow 浏览器可能会在后台重排，而不会使其可见。（可能是黑客不起作用的原因）

你有什么办法可以让浏览器明显回流吗？

我正在使用带有以下断点规则的边缘回流设计响应式站点：

<480px, <768, 1024>

我为各自宽度的每个断点使用不同的背景图片。但是，当我将它们添加到 Reflow 时contain，scale-x似乎我创建的图像不是那个大小。它们中的大多数比设计的至少短 200 像素。

所以我的问题是我应该为每个断点使用什么尺寸的背景图像，以及使用回流的任何其他指导或我做错了什么的建议。

通常我会使用cover而不是contain然后图像缩放并且不显示我需要从设备到设备的内容。

谢谢

嗨，我有这个导航栏：

如果设备的屏幕太小以显示三个按钮，我需要添加一个按钮“菜单”。

像这样的东西：http: //img30.imageshack.us/img30/8634/o6c5.png

我知道我需要向 css 添加规则，但我不知道，谢谢

我刚刚阅读了一篇关于编写快速内存高效 javascript的文章，并且在“最小化回流”部分它警告有关执行单独的 DOM 附加操作，例如：

在这个函数之后，作者写道：

“只需将每个新 div 直接附加到元素就可以触发 20 次重排。”

所以作者并没有说它有。由于我大量使用d3.js，所以我去查看github上的源代码以检查他们是否有任何评论reflow或任何用法DocumentFragment（尽管这可以通过其他技术实现）。

我的问题是：有人知道 d3.js 是否采用了任何技术来减少回流，还是将优化留给浏览器？

谢谢。

我的问题很简单，

为什么当我尝试获取元素的偏移位置时，我可以在 chrome devtool 时间轴上看到任何回流？

我刚读过这个=>

IE 中的 offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop/Left/Width/Height、ClientTop/Left/Width/Height、getComputedStyle() 或 currentStyle

以上所有这些本质上都是请求有关节点的样式信息，并且无论何时执行此操作，浏览器都必须为您提供最新的值。为此，它需要应用所有计划的更改、刷新队列、咬紧牙关并进行回流。

所以我打开了我的 chrome devtool 时间线，但是当我尝试这个时我没有看到任何重新计算的样式（紫色的东西）：

查看某些渲染的唯一方法是更改​​元素的样式：

每次我尝试获取窗口的滚动顶部但没有：/

我有几百个这样的“行”元素：

在页面上呈现它们之后，我需要获取它们的 clientHeight。我知道“clientHeight”属性会强制回流，这会影响我的表现，因为它们太多了。但是 - 它们已经被渲染，我知道它们的大小在渲染时间和我查询它们的高度之间没有变化。

有没有办法告诉浏览器在查询高度时不要重排？此外 - webkit 检查员说：

并且 div 位于绝对定位的祖先中 - 不应该只重排绝对定位的元素吗？

编辑：

所以提供的答案是正确的。我实际上弄脏了布局，因为我有这个循环：

将代码更改为此解决了问题：