问题标签 [reflow]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

170 问题
Newest
Active
Bountied
318
Unanswered
0 投票
2 回答
518 浏览

javascript - 切换隐藏小部件回流性能的最佳选择

我有一个关于回流性能的问题。

考虑到这个 HTML：

每 5 分钟发出一次 XHR 请求，并显示我必须显示或隐藏的“小部件 + 锚”。

例如，如果我必须隐藏“widget-two”，我还必须隐藏“widget-two-anchor”。这适用于每个小部件 + 关联锚点或任何其他关联 DOM 元素。

我目前有两种选择来实现这一点（如果您有更好的解决方案，我将不胜感激）。

  1. 使用 JavaScript：对于每个“小部件”：隐藏或显示它并隐藏或显示 associates-widget DOM 元素（在本例中为锚点）。

  2. 使用 JavaScript 和 CSS： 在元素上添加一个类<body>，例如“hide-widget-two”，它通过 CSS 依赖隐藏小部件和所有 associates-widget DOM 元素（在本例中为锚点）。

例如 ：

我选择了第二个，因为它的可维护性：用 CSS 比用 JavaScript 更容易隐藏或显示许多元素。如果明天我必须添加另一个关联小部件 DOM 元素，我只需要更新我的 CSS 文件。

因为我在这篇文章中看到最小化浏览器重排，更改 DOM 树中的一个级别会导致树的每个级别都发生变化，那么哪个选择更好？

切换正文上的类并可能导致整个页面重排？或者在每个项目上切换样式显示并导致该项目的每个 DOM 树子项的重排？

0 投票
0 回答
11 浏览

javascript - JavaScript：我的事件处理程序是否会覆盖自身？在这种情况下如何减少回流？

使用以下代码，我尝试为 HTML 列表创建标记，然后将事件处理程序附加到每个列表元素。

该列表按预期创建，一切似乎都工作正常，唯一的问题是它总是提醒I am 4，无论li我点击什么。所以我猜每个事件处理程序都会覆盖前面的，为什么？

我还看到了我这样做的一个很大的缺点，因为我必须在添加li事件侦听器之前将每个添加到 DOM，这会导致大量回流。我宁愿将所有li元素添加到 DOM 中ul，然后将完整列表添加到 DOM 中。是否可以这样做并添加事件处理程序？

一般来说，也许有更好的方法？

0 投票
2 回答
30145 浏览

javascript - 更改 CSS 时强制浏览器触发重排

我正在构建基于 CSS3 过渡的非 jQuery 响应式图像滑块。

结构很简单：一个视口和内部相对定位的 UL，带有左浮动 LI。

在这种情况下我面临一个问题：

  1. 用户单击“上一个”箭头。
  2. JS 在当前显示的 LI 节点之前附加适当的 LI。
  3. 目前 UL 已将 CSS 过渡设置为none 0s linear防止动画更改。在这一刻，我将 UL CSS 左值减小滑块宽度（假设：从 0px 到 -1200px）以使视图与原来相同。
  4. 现在我将 UL 的转换属性更改为all 0.2s ease-out.
  5. 现在我正在改变 UL 的 left 属性来触发 CSS3 动画。（假设：从 -1200px 到 0px）。

问题是什么？浏览器简化了更改并且不制作任何动画。

Stoyan Stefanov 在他的博客上写了关于回流问题的文章，但在这种情况下，试图强制对元素进行回流是行不通的。

这是一段代码（为了简化，我跳过了浏览器前缀）：

ul.style.transition = 'none 0s linear 0s'; ul.style.left = '-600px'; ul.style.transition = 'all 0.2s ease-out'; ul.style.left = '0px';

这是查看实际问题的小提琴：http: //jsfiddle.net/9WX5b/1/

0 投票
0 回答
662 浏览

javascript - 如何计算浏览器中的重排/重绘次数？

我最近阅读了 Stoyan 关于浏览器回流的以下文章。它深入了解什么是回流和重绘，它对性能有什么影响以及如何改进。它还显示了一些第三方工具，可以帮助可视化这一点。

我开始研究是否有可能在没有第三方工具的情况下以某种方式检测浏览器中的回流，并有一些基于此的指标（例如，在 javascript 中，我可以计算已触发多少 ajax 调用）。

因为我的搜索不成功，所以我在这里询问是否可以计算某些操作触发的重排/重绘次数？例如，如果我有一个功能

我想知道这个功能导致了多少次回流/重绘。

这个问题，听起来也很相似，正在寻找一种工具来做到这一点（此类工具在文章中有描述）。

0 投票
1 回答
58 浏览

javascript - 测试是否在回流期间启用了 JS？

如果启用了 JS，我知道如何在页面加载或刷新时进行测试，但是可以在每次重排时执行此操作吗？

假设页面在 JS 启用时加载，但在浏览器会话期间它被禁用，此后用户执行的任何 JS 相关操作都将失败。例如，在测试之后，我发现 Chrome 需要在这些更改生效之前刷新，而 Firefox 立即应用它们 - 因此，当 JS 被禁用并且没有在页面加载时生效的回退启动时，最初运行良好的网站崩溃了。

有些人可能会称这是一个微不足道的问题，我确信有可以解决这个问题的后备方案，但是是否可以在每次重排时测试页面的状态？

欢迎任何进一步的想法/建议/后备示例。非 JQuery 最受欢迎。谢谢！

0 投票
2 回答
123 浏览

html - 边距：0 自动；宽度：1024；导致水平可见文档回流加载，为什么？

我可以在具有不同设计的多个网站中重现此问题。不幸的是，我无法在 jsfiddle 上重现它，因为它没有全屏。

在这两种情况下，都有一个 body 或 div 元素，例如：

并且页面在 200 毫秒（在 onload 事件附近）后得到可见的回流。使用自动边距时导致水平回流的原因是什么？

例子：

此页面已重排：http://www.numbeo.com/common/form.jsp?country=United+States&city=San+Diego%2C+CA&returnUrl =%2Fcost-of-living%2Fcity_result.jsp%3Fcountry%3DUnited% 2BStates%26city%3DSan%2B迭戈%252C%2BCA

以下没有它： http ://www.numbeo.com/cost-of-living/calculator.jsp

0 投票
1 回答
446 浏览

dart - 如何在不使用 Dart（在 js 中）触发重排的情况下计算页面上元素的位置（x，y）？

我使用 Dart（编译为 JS）计算页面中元素的位置。但是我读到这可能会触发回流，这会导致时间成本高昂吗？真的吗？

大型应用程序的回流/布局性能

0 投票
1 回答
70 浏览

jquery - 为什么 jQuery Mobile 显示表格错误？

为什么我的表格显示错误？在演示页面上很好，但在我的代码上看起来很糟糕。你能帮助我吗？我使用实际的 jQuery 1.4.2

我的文件在这里：http ://stratisoft.ch/phpbuilder/users/user2/termin/test.html

和这里的工作演示：http: //demos.jquerymobile.com/1.3.0-rc.1/docs/tables/table-reflow.html

这看起来很糟糕：

sieht nicht gut aus http://stratisoft.ch/phpbuilder/users/user2/termin/doof.png

这看起来不错：

sieht 肠道澳大利亚 http://stratisoft.ch/phpbuilder/users/user2/termin/gut.png

0 投票
1 回答
1440 浏览

javascript - Reflow / repaint detection: Possible today? Possible in the future?

I'd like to know if there's a reliable way on modern web browsers to detect document reflows and/or repaints, or if there's any pressing interest for such a thing that might put it in a W3 spec.

I would also like to know how it can be accomplished at all using vendor-specific tricks (e.g. Mozilla apparently has a MozAfterRepaint event,) if it's not possible in a standard or cross-browser way.

Thanks.

0 投票
0 回答
539 浏览

css - 更改 box-shadow 或 text-shadow 属性时如何避免重排？

这是我的测试CSS：

应用于带有“btn”类的简单 div。使用 Firefox 的 28 Web Developer Console 我发现每次鼠标悬停在 div 上时都会执行 1 次重排，而当鼠标不再悬停在 div 上时会执行另一次重排。

如果我将“位置”属性从“相对”更改为“绝对”，则没有任何变化，如果我停用“文本阴影”或“框阴影”属性也不会改变。我发现不会触发两次重排的唯一方法是禁用“box-shadow”和“text-shadow”属性。

为什么会发生这种情况以及如何避免执行两次回流？


12345678910