问题标签 [reflow]

我正在开发一个导致大量浏览器重排的应用程序。性能是这里的一个关键问题。从性能的角度来看，对某些 DOM 元素使用 CSS3 渐变还是图像渐变更好？使用 CSS 文本阴影和渐变的页面是否会像使用图像来实现这些视觉效果的页面一样具有较慢的重排速度？另外，有没有我可以使用的回流测试？

我在使用溢出时遇到了 webkit 中的渲染问题：隐藏；在子 div 上，然后使用 javascript 增加父 div 的高度。我将我的问题归结为以下示例代码。

从此源创建一个页面，然后在 WebKit 浏览器（Safari、Chrome）中呈现。点击“展开”按钮，你会看到有溢出的div：隐藏；设置，现在应该根据展开的父 div 高度显示不显示。在 Gecko (Firefox) 和 Trident (ID) 浏览器中，这可以正常工作。

任何解决方法的想法或建议？基本上，我想手动构建一个 div 表，其中包含父 div 中的文本，并且我不希望文本换行或超出 div 边界。我需要能够根据页面上发生的其他事情来调整父 div 的高度。

谢谢！巴特

我正在用弱 CPU 和 WebKit 在嵌入式硬件上设计一个 JavaScript/HTML 驱动的用户界面。

性能并不理想，我想对应用程序进行分析，特别是对回流和重绘事件进行计时，以获得有关实际性能的硬数据，而不是主观和不断变化的意见。

在之前和之后使用常规的“getTime()”进行计时是行不通的，因为 WebKit 将重排和重绘推迟到事件处理程序之后。

我尝试在 Speed Tracer 下分析应用程序，但计算非常便宜，以至于回流事件甚至不会出现在 PC 硬件上。我想一些更专注于回流/重绘的工具可能仍然有用。

关于如何为此获取硬数据的任何提示？

有没有人对休闲行为有任何评论？
我已经在兼容模式下在 IE8 上对其进行了测试，但我不确定真正的 IE7 行为。任何其他浏览器都正常运行。

当文档重排时，任何相对定位的图像都会失去它们的坐标。
如果将文本添加到段落，则会看到该行为，但如果添加更多段落则不会！

看到这个：

看看回流后图像如何显示？

我有一个包含许多 facebook“喜欢”按钮的页面，这些按钮使用内联 fbml 技术（与 iframe 相对）嵌入。很简单。页面呈现良好，一切都按预期工作。

然而...

一旦我将xmlns:fb="http://www.facebook.com/2008/fbml"命名空间声明添加到文档中，我就会注意到 IE 中初始页面呈现时间的急剧下降。仔细检查（使用 ie8 开发人员工具）显示整个 DOM 在页面初始加载后的短时间内似乎一遍又一遍地“刷新”或“回流”。一些进一步的讨论表明，重排的数量显然与<fb:xxx>文档中的元素数量成正比。

删除 xmlns 声明会使问题消失。

以前有人经历过吗？

更新：

一些进一步的挖掘揭示了一些更多的细节......问题确实是IE正在重新流动页面，包括重新执行任何内联脚本等等。原因似乎不是包含 xmlns 本身，而是按钮本身的 xfbml 呈现。添加 xmlns 只是触发了 xfbml 渲染，没有 xmlns，按钮从一开始就不会渲染。以下标记说明了该问题。

在 ie 中运行时，上面的示例生成 3 个警报，我希望只看到一个。

我正在尝试制作一个类似句子填充的界面，我可以在一个段落中任意混合TextViews 和s。EditText

我看过这个问题，但问题是当我有 [ TextView1, EditText, TextView2] 并且内容TextView1占用 1 个整行和第二行的 1 个五分之一时，则TextView1必须跨越整个宽度，因为它是一个矩形. 这会推EditText到下一行，这很丑陋。

那么是否可以从 Android 中的现有内容创建这种 ViewGroup/Layout，或者我必须View从头开始进行自定义？

如果我不善于解释，这个截图描述了我的问题：

非常感谢。

当我们使用 JavaScript 对单个元素应用大量样式更改时， phpied & Writing Efficient JavaScript (slide 87) 建议：

而不是使用 style.stylename 逐个应用样式，而是使用 cssText 一次性应用所有内容或更改类名，因为它会减少重排/重绘

当只有一个样式更改时，哪个更好？

或者

jsperf.com/csstext-vs-styles-single表明，当只有一个样式更改时，使用单个样式名称比 cssText 更快。

是否还有其他因素需要考虑？

我正在处理具有用户可调整大小列的网页，并且在调整列大小时遇到​​重排问题，这会导致元素在列变窄时被向下推和不对齐。然而，谷歌文档似乎没有这个问题；您可以调整文档列表的大小，它会截断文本而不是将其推到下一行。查看CSS，我无法弄清楚哪个CSS属性负责，所以如果有人有任何想法，将不胜感激。

我有一个弹出菜单 div，它使用以下 jQuery 显示和隐藏：

在 IE9 中正确显示：

...但在 IE7 中，它显示了一些奇怪的白色标记：

有没有人见过这样的事情？如何让 IE7 正常显示？

如果有帮助，这里是 HTML：

CSS：

非常感谢

可以在这里看到一个活生生的例子。

红色方块（显示）直接位于绿色方块上方（隐藏为溢出）。单击正方形，两个彩色正方形立即变得完全透明。另外，红色方块的高度设置为0；这会触发一个过渡，但由于红色方块现在是透明的，所以过渡看不到。

在再次单击方块之前，检查toggle函数。查看 JavaScript，我希望红色方块的高度在不触发转换的情况下重置为其原始值。应该抑制过渡，因为在none更改高度时临时设置了过渡属性。

现在再次单击正方形。两个彩色方块都会立即变得完全不透明，但红色方块会随着高度从 0 过渡到原始值而向下滑动。就好像在toggle元素可见之前，函数不会删除内联样式设置的高度，到那时，过渡属性也已被重置。

触发回流似乎会强制应用高度变化。（取消注释包含offsetParent要测试的行。）这种行为发生在浏览器（至少 Chrome 和 Safari、Firefox 和 Opera）中，所以我想知道它是否不是某些规范的一部分。我检查了CSS 过渡模块但没有成功。任何想法为什么会发生这种行为，以及为什么它在实现之间如此一致？