问题标签 [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.

0 投票
1 回答
3435 浏览

javascript - 修改 DOM 元素和限制重排的最有效方法是什么?

当使用具有潜在大型 JS 库、视图模板、验证、ajax、动画等的非常动态的 UI(想想单页应用程序)时,有哪些策略可以帮助最小化或减少浏览器在重排上花费的时间?

例如,我们知道有很多方法可以完成 DIV 大小的更改,但是否有应该避免的技术(从回流的角度来看)以及浏览器之间的结果有何不同?

这是一个具体的例子:

举一个简单的例子,在调整窗口大小时控制 DIV 大小的 3 种不同方法,应该使用哪些方法来最小化回流?

http://jsfiddle.net/xDaevax/v7ex7m6v/

0 投票
2 回答
2393 浏览

javascript - Element.getBoundingClientRect 什么时候保证更新/准确?

我正在研究一些使用Element.getBoundingClientRect(gBCR) 以及内联样式更新来执行计算的代码。这不适用于一般网站,我不关心或感兴趣是否有“更好的 CSS 方式”来完成这项任务。

JavaScript同步运行并执行以下步骤:

  1. 获取父母的 gBCR
  2. 进行计算,并且;
  3. 元素的子元素已更新内联 CSS 样式(例如大小和边距)
  4. 再次获取父级的 gBCR

我是否保证计算的客户端边界将反映步骤 4 中父级的新边界矩形

如果没有规范保证,这是现代1浏览器实现的“保证”吗?如果“大部分保证”,有哪些值得注意的例外情况?

元素没有被添加到 DOM 或从 DOM 中删除,并且被修改的元素是父节点的直接子节点;如果此类限制/信息是相关的。


1 “现代”:UIWebView (iOS 6+)、WebView (Android 2+),以及常见的 Chrome/WebKit、FF、IE9+ 嫌疑人——包括移动版本。

0 投票
1 回答
188 浏览

javascript - 制作 DOM 回流/刷新

我是 JavaScript 和 D3 的新手,我正在尝试修改 DOM 元素的一些属性,然后让页面重排/刷新,以便我可以看到这些更新的更改。诀窍是我需要这种情况自动发生,而不需要任何类型的 onclickevent 或按钮单击或鼠标移动或任何东西。

我已经尝试了在互联网上可以找到的所有内容,但没有任何效果,但奇怪的是,如果我在更改元素属性的行之前调用 alert(),当我单击“确定”时,元素会在屏幕上重新定位。我需要这种情况发生,而不必调用 alert() 并单击确定。

这是有问题的代码:

如果我删除警告线,我的元素永远不会移动。如果我把它留在那里,然后单击确定,那么一旦我这样做,我的元素就会自行重新定位。

谢谢您的帮助!!!!

0 投票
1 回答
1996 浏览

jquery - jQuery Mobile 表格重排 - 表格不水平显示

我在 JQuery Mobile Reflow 上遇到了一个问题,其中只有两列仍然以垂直顺序显示。

我怎样才能很好地显示到水平表中?

http://jsfiddle.net/fsloke/w3tLc6fs/

0 投票
2 回答
714 浏览

javascript - 最小化浏览器重排/重新渲染

我目前正在为我的硕士论文编写一些代码。我有几个关于有效 DOM 操作的问题。

1) 考虑到您必须在彼此靠近的多个节点上执行一堆 DOM 操作。制作所有这些节点的最顶层 parentNode 的深层副本(并将其保留在 DOM 之外),在该子树上执行操作,然后将其与 DOM 中的对应物交换是否有意义。这会最小化浏览器重排/重新渲染吗?

2) 更改节点的 innerHTML 是否比操作它的子树性能更高/更低?

3) 关于在 vanilla javaScript 中进行有效的 DOM 操作(没有任何框架/库),您可以给我更多好的建议吗?

先感谢您!

0 投票
0 回答
332 浏览

css - Adobe:Edge Reflow 如何使用类而不是 ID

我正在使用 Adob​​e Edge Reflow,并使用该软件进行了多种设计。

我发现的一件事是,在导出的 CSS 中,每个元素在样式表中都有自己的 ID。

在许多情况下,有些元素应该使用类,但我看不到在 Reflow 中这样做。

对于我创建的一个网站,我手动更改了此设置,但是您可以想象它花了很长时间。

如果有人知道在 Reflow 中使用类的任何方式或管理导出样式表的更好方式,我将不胜感激。

0 投票
3 回答
40723 浏览

html - 什么是 DOM 回流?

我正在阅读关于两个 CSS 属性之间的差异display:nonevisibility:hidden并遇到了DOM 重排术语。

该声明是

display: none导致 DOM 回流,而visibility: hidden不会。

所以我的问题是:

什么是 DOM 回流,它是如何工作的?

0 投票
0 回答
119 浏览

git - 编写任何 git reflow 命令时出现以下错误

编写任何 git reflow 命令时出现以下错误

这是我在执行期间得到的git reflow setup

0 投票
0 回答
725 浏览

android - Android Webview 中的文本重排

自 Android KitKat 发布以来,文本重排已从 Webviews 中删除。不幸的是,棒棒糖没有解决这个问题。似乎出于某种未知原因,Google 已决定不需要文本重排:

https://code.google.com/p/android/issues/detail?id=62378

我正在使用 Webviews 来显示我的应用程序生成的 HTML 代码。所以我可以完全控制 HTML 内容和 Android 应用程序。您知道用户捏缩放后实现文本重排的方法吗?也许可以通过修改 HTML 或使用 Javascript 和/或 CSS 来完成?在网上搜索了几天并尝试了一些建议的解决方案后,似乎没有任何工作正常。

或者,是否有一个不同的控件同时支持捏缩放和一些基本的文本格式(颜色、粗体、大小等)?

最后,有谁知道为什么谷歌删除了捏缩放文本重排?它在 Android 2.2 上完美运行。

0 投票
1 回答
1139 浏览

javascript - 更多 DOM 元素造成性能问题

我们使用 asp.net mvc、javascript 和 jQuery(托管在本地机器上)创建了一个应用程序。基本设计是,当用户从一个页面导航到其他页面时,通过隐藏和显示 HTML 页面,我们将所有 HMTL 元素保留在 DOM 对象(浏览器)中而不是销毁。

我们的应用程序每天都在增长。早些时候,我在我的项目中没有看到任何性能问题。但是现在,如果我将一个页面导航到另一个页面需要很长时间。今天我检查了我页面中的 DOM 元素,它超过了 20,000 个。

问题:


隐藏/显示 HTML 页面是比破坏和重新创建更好的设计吗?

使用 20,000 个 DOM 对象从 javascript 进行 DOM 操作,在回流和重印方面对性能有什么影响?