问题标签 [reflow]

我在这里搜索并搜索了几个小时，但还没有找到解决这个问题的方法......基本上，我有一个巨大的图标列表，一旦每个列表项悬停，它就会展开以显示项目的文本名称. 但是，在为宽度设置动画后，整个文档将被迫重排。

有没有办法解决？我已经尝试了所有我能想到的 jQuery 和 css 组合，但都无济于事。一旦悬停在基于 jQuery position() 的位置上，我尝试添加绝对定位（相对于父 UL）......但是，这并没有像我希望的那样工作。

我真的很希望能够悬停每个图标，让它展开以显示文本，而不是重排其余内容，只是像它处于固定位置一样，因此不与其余部分交互内容布局。

这是动画位：

另外，我想实际标记的视图可能会有所帮助，所以在这里：

这是显示结果的图像：

我需要能够对基于 webkit 的浏览器的特定构建进行基准测试，并测量执行某些操作（如 DOM 操作、内存限制等）所需的时间长度。

我在下面有一个测试，它记录了同时加载 10 个相当重的 PNG 图形所需的时间长度。在代码中，我需要能够计算加载完成所需的时间。我尝试在动态 Image 对象上设置 onLoad 函数以产生以毫秒为单位的时间。但是，如下面的上限所示，它给出的读数不准确，因为它给出的读数很小，因为它只记录负载的数据传输部分，然后当图像是可见的 -蓝色循环，这是浏览器回流循环。

webkit 中是否有一些事件可以用来记录浏览器何时完成重排，以便我可以对此进行基准测试？我必须能够在代码中以毫秒为单位记录时间，因为我正在测试的 webkit 构建没有开发人员工具。我可以观察到 Chrome 中的差异，但是两个版本之间的性能差异很大，我需要能够准确地量化它以进行比较。

比如说，我有一个要使用 Javascript 处理的 HTML 文件。例如：

• 添加一些 DOM 元素，例如span或div包装器。
• 稍微更改文档样式，例如基本字体大小、行高等。
• 使用连字符来添加­实体。

什么是最有效的方法来做到这一点，即我想用最少的回流来做到这一点。

理想的情况是在第一个布局之前运行 JS 代码。这可能吗？我知道，在显示页面之前执行昂贵的脚本通常是一个坏主意，因为这会使页面在一段时间内看起来很空白，这是一种非常糟糕的体验。但是，我将需要它离线工作，这对我的项目来说不是问题。

或者，有没有办法一次性完成所有的 dom 修改，即在所有修改完成后触发回流？

我有这个 HTML 结构：

这个JavaScript代码：

http://jsfiddle.net/FF2Dr/

单击时h1，某些字母会变成某种颜色。问题在于性能，我触发了太多的回流/重绘。在另一个问题中，有人告诉我使用parent.cloneNode(true)and parent.parentNode.replaceChild(clone, parent)。所以我克隆了元素，改变了它们，但它们又回到了原位，只触发了一次回流。

所以我克隆了父元素：

但是我现在必须如何进行？我必须以某种方式修改元素clone然后替换它们，但$.each再次使用来编辑它们似乎不是一个好主意。

http://jsfiddle.net/FF2Dr/1/

查看实际问题：http: //jsfiddle.net/krtGd/1/

我在 float 中有一个嵌入式 SVG 元素div，如下所示：

这很好用；在divSVG 周围符合预期。但是，当我使用 JavaScript 调整 SVG 的大小时，如下所示：

... SVG 正确调整大小，但它周围的框没有。正如您在 jsFiddle 中看到的那样，如果包含div具有display:inline-block而不是浮动样式，则同样的情况也是如此。

这里奇怪的是，让我相信这是一个回流问题而不是一个简单的布局问题的是，如果您检查 Chrome 控制台元素面板中的任何一个问题元素，这些div元素都会正确调整大小。此问题可能仅适用于 Google Chrome - 我在Chrome OSX v.20.0.1132.57中看到它，但在 Safari 中没有。我没有在 FF 或 IE 中测试过。

那么：如何在 Chrome 中强制重排？

我已经尝试了通常的嫌疑人，包括检查div.offsetHeight,svg.getBBox()和其他几个变体。

我已经尝试了所有应该调用回流的方法，但没有发生。我调用我的测试函数 10 次以在我的屏幕上绘制一些元素，并且我在每次迭代中移动该元素。该循环立即执行，最后我得到一张图片，而不是在屏幕上看到元素的移动。

就好像当所有的工作都完成后，屏幕上的回流和绘图被调用了。但我想看每一幅画。

我尝试过的所有事情都没有产生任何结果。唯一有效的是alert()，但我不需要与用户交互。

如果有帮助，我正在使用 webkit 1.2.5。

如果我不够理解，我会尝试更好地解释。

这是我强制重排的代码

我需要的是每次执行 fTestInfo(i) 时在我的屏幕上看到一张图片，但相反，我只看到最终结果。

fTestInfo 取决于 i 它向左移动 i 的值。

我正在制作 PDF 查看器并尝试进行重排。我阅读了 PDF 参考 1.7

http://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/devnet/pdf/pdfs/pdf_reference_1-7.pdf

当我阅读“逻辑结构”（10.6）部分时，我认为制作回流PDF就足够了。因为我可以提取每个章节、每个标题、每个带有布局的段落，我可以将它们放在 xml 中以通过 javascript 回流呈现为 web 显示。

然后我阅读了“Tagged PDF”（10.7）部分，它说它支持回流，与“逻辑结构”相比，我不知道这里有什么不同的好处。谁能解释我？

非常感谢您的宝贵时间！

我知道设置样式属性会导致浏览器重排。访问布局属性时是否也可能发生浏览器重排。如果是，请举一个具体的例子，为什么会导致浏览器重排？

我有一个名为Countdown Calendar的应用程序（它是一个小部件，可以对您的 Google 日历中的事件进行倒计时；修复小错误 atm）。但是我现在要修复的错误与输入文本时 UI 重新流动有关。让我举例说明。以下是未使用键盘时 UI 的外观：

这是键盘退出时的样子：

当用户尝试使用键盘时，如何使 UI 看起来不那么糟糕？

所以我试图通过 z-index 控制相同大小元素的堆叠。现在，我最近遇到的一个想法是通过希望避免浏览器重排来避免通过 z-indices 并提高性能时间，而是通过我将事物附加到父级的顺序来排序层。

因此，如果我有一个包含所有堆叠 div 的容器 div，以及反映顺序的链表，引用堆叠 div，那么我会根据用户输入对 div 重新排序。然后，我不会更新 z 索引，而是重新创建 div 元素并按顺序附加所有内容。所以是这样的：

所以我的问题如下：

1. 这会将浏览器回流从 n 次回流减少到 1 或 2 次（其中 n 是 div 的数量）？如果我理解正确，更改单个元素的 z-index 应该会导致浏览器重绘或重排。
2. 第二种方法是否会按照您添加元素的顺序工作和堆叠元素？
3. 有没有办法使用 DOM 的子节点结构来移动孩子，所以我不必创建单独的链表？我只看到我目前可以使用的 removeChild 和 appendChild 函数。

是的，性能是一个问题，因为我打算将它用于图形和 html5 的东西。所以我可以保存我想保存的地方。