问题标签 [reflow]

在 iPad 上开发 HTML5 应用程序时，我想更改硬件加速元素的高度。

我在子元素（绝对定位，大于父元素）上创建了一个视口（父元素，溢出：隐藏），扩展视口的高度应该显示子元素的大部分。

动画在我的桌面浏览器 (Chrome) 上看起来非常好，但是在我的 iPad (iOS 6) 上运行时，动画不是那么流畅。

下面的 JSFiddle 说明了这个问题：

http://jsfiddle.net/schade/bqsnS/（使用 iPad 查看问题，使用 Chrome 查看它应该如何工作）

我已经调试了 iPad，我的结论是它做了很多回流，现在，我的结论是，无论我如何设置子元素的位置，父元素的高度总是会强制重绘 iPad 上的子元素元素。或者？

有没有人可以解决这个问题？

还是某种不错的解决方法？

有哪些技术可以在现代浏览器中监听布局变化？window.resize不起作用，因为它仅在调整整个窗口大小时触发，而不是在内容更改导致重排时触发。

具体来说，我想知道什么时候：

• 元素的可用宽度发生变化。
• 元素的流入子元素消耗的总高度发生变化。

我正在尝试实现我自己的基于流的小布局引擎。它应该模仿 HTML 布局的行为，但只模仿渲染树，而不是 DOM 部分。渲染树中元素的基类是 Node类。它有：

• 指向 DOM 中元素的链接（对于那些使用该库构建渲染树的元素）
• 对它的父级的引用（这是一个ContainerNode实例或无，见后文）
• 对布局选项的引用
• X、Y、宽度和高度（在 中计算layout()大小之后，在 中计算compute_size()位置。虽然位置由layout()父级的方法定义，但大小由选项引用定义）。

它的方法是：

• reflow()调用compute_size()和layout()
• compute_size()用于计算节点的宽度和高度。
• layout()它旨在定位节点的子节点，而不是节点本身。
• paint()这是由图书馆的用户覆盖的。

该类ContainerNode正在实现子节点的处理。它提供了一个名为 的新方法add_node()，它将传递的节点添加到容器子容器中。该函数还接受默认为 False 的参数force，因为允许容器拒绝传递的节点，但force设置为 True。

这两个类不实现任何布局算法。我的目标是为不同类型的布局创建不同的类（在 CSS 中，主要由display属性定义）。昨晚我对文本布局进行了一些测试，您可以从pastebin.com找到我的代码（需要 pygame）。您可以将其保存到 python 脚本文件并像这样调用它：

注意：代码真的很糟糕。我很欣赏对深层误解的评论。

上面提到的代码中的类InlineNodeRow实际上代表了我的想法，即如何实现布局类似于display:inline属性的节点（结合NodeBox）。

问题 1 - 内联文本的边距和填充

回到我在库中的当前方法：文本中的单个单词也将表示为单个节点（就像上面的代码一样）。<span>但我注意到标签中的边距和填充有两件事。

1. 设置边距时，只考虑水平边距，忽略垂直边距。
2. 填充溢出父容器并且不会“移动”跨度节点。

请参阅http://jsfiddle.net/CeRkT/1/。

我在这里看到了问题：当我想计算 的大小时InlineNodeBox，我向文本节点询问它的大小并将其添加到节点的大小中。但是文本节点的大小包括它的边距和填充，这不包括在 HTML 渲染器的定位中。因此下面的代码是不正确的：

node.w将包括边距和填充。我看到的下一个问题是，为了正确布置文本节点，我想将它们拆分TextNode为每个单词的单个 s，但是边距和填充随后将应用于所有这些节点，而 HTML 中的边距和填充<span>仅对标签。

我认为我目前将每个单词放入单独节点的想法并不理想。浏览器如何构建他们的渲染树，或者你有更好的主意吗？

问题 2 - 单词太长，放到下一行。

该类InlineNodeBox目前只组织一个单行。在上面的代码示例中，我InlineNodeBox从NodeBox前者拒绝接受节点（这意味着它不适合）中创建了一个新的。我不能用我目前的方法做到这一点，因为我不想重新重建渲染树。当一个节点被接受一次，但超过InlineNodeBox下一次回流时，我如何正确地将单词放入下一行（假设我保持InlineNodeBox类只组织单行节点的想法）？

我真的希望这一切都有意义。如果您不理解我的概念，请随时询问。我也非常愿意接受对其他概念、资源链接、文档、出版物等的批评和想法。

对于反应时间研究（如果您有兴趣，请参阅此问题），我们想要控制和测量图像的显示时间。我们想考虑在不同用户的机器上重新绘制所需的时间。

编辑：最初，我只使用内联执行来计时，并且认为我不能相信它能够准确地测量图片在用户屏幕上可见的时间，因为绘画需要一些时间。

后来，我找到了事件“ MozAfterPaint ”。它需要更改配置才能在用户的计算机上运行，​​而相应的WebkitAfterPaint没有成功。这意味着我不能在用户的计算机上使用它，但我将它用于我自己的测试。我在下面粘贴了相关的代码片段和我的测试结果。
我还使用 Chrome 中的SpeedTracer手动检查了结果。

比较使用 MozAfterPaint 和内联执行测量的持续时间的结果。

这不会让我太高兴。首先，中值显示持续时间比我想要的短约 30 毫秒。其次，使用 MozAfterPaint 的方差非常大（并且比内联执行更大），所以我不能简单地通过将 setTimeout 增加 30 毫秒来调整它。第三，这是在我相当快的计算机上，其他计算机的结果可能会更糟。

SpeedTracer 的结果

这些更好。图像可见的时间通常在预期持续时间的 4（有时）10 毫秒内。看起来 Chrome 也考虑了在调用中重新绘制所需的时间setTimeout（因此，如果图像需要重新绘制，则调用之间存在 504 毫秒的差异）。不幸的是，我无法在 SpeedTracer 中分析和绘制许多试验的结果，因为它只记录到控制台。我不确定 SpeedTracer 和 MozAfterPaint 之间的差异是否反映了两个浏览器的差异，或者是我在使用 MozAfterPaint 时缺少的东西（我很确定我正确地解释了 SpeedTracer 输出）。

问题

我想知道

1. 如何测量它在用户机器上实际可见的时间，或者至少获得不同测试计算机（Chrome、Firefox、Safari）上一组不同浏览器的可比数字？
2. 我可以抵消渲染和绘画时间以达到 500 毫秒的实际可见性吗？如果我必须依赖通用偏移，那会更糟，但仍然比在如此短的时间内显示图像要好，以至于用户在速度较慢的计算机上不会有意识地看到它们。
3. 我们使用setTimeout. 我知道，requestAnimationFrame但似乎我们无法从使用它中获得任何好处：
   该研究应该是整个研究期间的焦点，更重要的是我们获得 +/-500 毫秒的显示而不是某个特定的帧数。我的理解正确吗？

显然，Javascript 对此并不理想，但它对我们的目的来说是最不坏的（该研究必须在用户自己的计算机上在线运行，要求他们安装一些东西会吓跑一些人，Java 没有捆绑在 Mac OS X 浏览器中不再）。
目前我们只允许当前版本的 Safari、Chrome、Firefox 和 MSIE（性能检测功能。现在和全屏 API，我还没有检查 MSIE 是如何做的）。

首先，我希望 WebView 可以滚动，但它需要像图片一样表现，这样滚动不会导致 WebView 重新排列其布局以适应屏幕。当页面真的比屏幕大时，它应该只提供滚动条。

我已阅读How to stop android webview from wrapping content while zooming? . 除了执行的双击之外，它可以工作。

要重新生成问题，
1. 我将一个充满文本的网页加载到全屏 WebView。
2.双击屏幕右侧。<--这里只是放大，没问题
3. 双击屏幕左侧。

问题来了。文本重新排列。当我缩放回原始比例时。文本仅占屏幕的一半。

无论发生什么，如何阻止 webView 重新排列其布局？

我有一个 200px 宽的侧边栏，我放在里面的 Facebook Like 按钮在 DIV 的边界之外运行。是否有任何解决方法可以让 Like 框文本识别 200px 标记并在需要时重排到新行上？

我正在使用此代码：http: //jsfiddle.net/tKkpm/2/

我在 SO和其他地方读过，重新绘制和重新流动对于浏览器执行来说是昂贵的。

我很好奇 CSS/JS 替代 re-paint/display:none和 re-flow/visibility:hidden对浏览器的计算要求不高。

为了清楚起见，如果我错了，请纠正我，一个常见的回流场景是当您设置display:none要切换显示的元素时，例如下拉菜单。重排意味着浏览器首先“流动”，即显示，元素和下面的所有内容作为可见内容，但随后必须重新流动所有内容，因为需要隐藏下拉菜单。

关于回流和重绘的性能冲击是否真的是人们需要关心的事情，也欢迎评论。

我正在创建一个 GWT 应用程序，其中使用 aCellList和 a显示元素列表ListDataProvider。我想在每个单元格中显示的数据只包含两个字符串。我创建了一个从AbstractCell. 为了创建我的自定义单元格，我使用了 UIBinder 并基于 HTML 创建了 UI。每个单元格包含两个字符串和一个按钮。单击该按钮会从绑定列表中删除该元素。在我的分辨率下，大约有 20 个元素是可见的，所以我将页面大小设置为 30，以便在用户想要向下滚动时有一点“缓冲区”。前三个元素如下所示：

http://imageshack.us/f/201/listox.png/

在 tomcat 上运行已部署的应用程序时没有问题。但是在开发模式下运行时，我在删除元素时注意到以下问题：

• 我单击第一个元素的“删除元素”按钮
• 我再次单击第一个元素的“删除元素”按钮（而第一个元素仍然可见）
• 从列表中删除第一个元素
• 第二个元素也从列表中删除

我对已部署的版本进行了相同的尝试，但是我无法单击第一个元素的“删除元素”按钮两次，因为它被删除得太快了。所以我将显示元素的数量增加到 500，这导致了同样的问题。我切换到较慢的系统（1GHz 的 AMD G-T40R），同样的情况发生在我将页面大小设置为 50 或更大。

为了进一步深入研究这个问题，我在自定义 Cell的方法中添加了一个NativePreviewHandler并安排了一个ScheduleCommandvia ，以查看发生了什么。这是结果（在开发模式下运行，Chrome 27.0.1438.7 dev-m，添加了检查订单的时间戳）：Scheduler.get().scheduleDeferredonBrowserEvent

• 在 1363340977109 mousedown （在第一个元素的“删除元素”按钮上）
• 在 1363340977206 mouseup （在第一个元素的“删除元素”按钮上）

• 在 1363340977225 单击（在第一个元素的“删除元素”按钮上）

• 在 1363340981341 scheduleDeferred in onBrowserEvent

• 在 1363340981366 mousedown （在与第一次单击相同的位置，但现在在第二个元素的“删除元素”按钮上，因为第一个元素已被删除）

• 在 1363340981386 mouseup （在第二个元素的“删除元素”按钮上）

• 在 1363340981394 单击（在第二个元素的“删除元素”按钮上）

• 在 1363340985184 scheduleDeferred in onBrowserEvent

这里的问题是：第二次点击是否真的以某种方式“缓冲”了，因为浏览器正忙于渲染/（重新）绘制内容。有没有办法确定渲染何时完成或在浏览器忙碌时禁用用户输入？

我当前的解决方案/解决方法：删除元素时禁用按钮。所以点击被忽略。为了模拟浏览器完成渲染，我在执行后添加了一定的时间（~50ms）ScheduleCommand。然后我再次启用所有按钮。这暂时有效，但如果有一天浏览器缓冲输入超过 50 毫秒，问题会再次出现。

所以我使用 Bootstrap Carousel 来创建一个简单的滑块，但问题是当第一次触发转换时，每张幻灯片的绘制时间都需要很长时间，但在那之后它们似乎就好了，我的猜测是第一次转换导致回流，这就是它发生的原因，但不确定。

这是我在 Chrome 开发工具中看到的

这也是轮播的链接：http: //dev.around25.net/inzimo/#/weddings

任何解决此问题的建议将不胜感激。谢谢。

UsingDocumentFramgment允许我们将 DOM 元素彼此附加，而不会导致浏览器重排（即使用离线 DOM 树）。许多像jQuery这样的库使用文档片段来提高性能。

文档片段可以具有复杂的结构。例如，假设它代表如下内容：

或包含多个子项的文档片段：

通常，当我们完成构建片段时，我们会将其附加到主 DOM 树。

当我们这样做时会发生多少次回流？它是否取决于文档片段的直接孩子的数量？

更新：

我收到了来自Google Chrome 团队的Addy Osmani的回复：

只有一个 DOM 重排。PS：我们更倾向于将重排称为布局，因为它基本上是在页面中触发布局/重绘的事件。