标签: reflow

我想知道用Javascript动画滚动条是否会触发浏览器重排.

不同浏览器实现的差异？

window.pageXOffset&window.pageYOffset
document.documentElement.scrollLeft&document.documentElement.scrollTop
document.body.scrollLeft&document.body.scrollTop

谢谢!

如果我有一个绝对位置的元素,我改变它的左边,顶部位置将回流到它的父母孩子？如果它们没有受到影响,那么它自己的孩子怎么样呢,因为它们也被左轴和上轴绝对定位？

如果我更改元素的宽度/高度但在父级和子级中没有重要性？

我想知道在现代网络浏览器上是否有一种可靠的方法可以检测文件回流和/或重新绘制,或者是否有任何迫切需要这样的东西可能会将其置于W3规范中.

我还想知道如果使用特定于供应商的技巧(例如Mozilla显然有一个MozAfterRepaint事件),它是如何完成的,如果它不可能以标准或跨浏览器的方式实现.

谢谢.

我在 MDN 上查看了 textContent 和 insideText 之间的区别。它向我展示了一些让我很困惑的东西。

1.innerText 能够识别样式，并且不会返回隐藏元素的文本，而 textContent 会。（没问题，完全理解）

2.由于innerText能够识别CSS样式，因此它将触发回流，而textContent则不会。（为什么？）

我需要在我编写的附加组件中对整个网页文档进行大量的DOM操作.我想尽量减少回流,因此我的所有操作只会发生一次回流.删除body元素,执行操作然后再次插入它不是一个选项,因为这会重新评估所有<script>元素.目前我'none'在操作之前设置了主体的可见性并恢复了显示后的值.不过,我不确定这是否是解决这个问题的最佳方法.

有没有更好的办法？当然它可能是Firefox特定的代码.毕竟它是一个Firefox附加组件.

这是我正在寻找的.

我想找到一个格式化输出文本的库或方法,这样它的文字包装在80列(或用户可配置),并允许用户定义的缩进.

我知道我可以创建一个,但我怀疑已经有一个可用的库可以做到这一点.我已经google了一下,我找到了iomanip的页面 - 这给了我创建自己的想法.

我已经对boost库进行了粗略的搜索,但我并没有找到任何匹配的东西.

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

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

这是一个具体的例子:

给出了一个简单的例子,当窗口调整大小时,有3种不同的方法可以控制DIV的大小,应该使用哪些方法来减少回流？

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

//Method 1: Pure Javascript
function resize(width, height) {
    var target = document.getElementById("method1");
    target.setAttribute("style","width:" + width + "px");
    target.setAttribute("style", "height:" + height + "px");
    console.log("here");
} // end function
window.onresize = function() {
    var height = (window.innerHeight / 4);
    var width = (window.innerWidth / 4);
    console.log(height);
    resize(height, width);
}
//Method #3 Jquery animate
$(function() {
    $(window).on("resize", function(e, data) {
        $("#method3").animate({height: window.innerHeight / 4, width: window.innerWidth / 4}, 600)
    });
});

自 Android KitKat 发布以来，Webviews 中的文本重排已被移除。不幸的是，Lollipop 并没有解决这个问题。似乎出于某种未知原因，Google 已决定不需要文本重排：

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

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

或者，是否有不同的控件同时支持双指缩放和一些基本的文本格式（颜色、粗体、大小等）？

最后，有谁知道为什么 Google 删除了缩放文本重排？它在 Android 2.2 上完美运行。

TL; 博士

是什么导致在 Chrome 中重新计算样式以及如何减少此步骤的时间？

背景

在具有许多元素（变量，例如 10,000）的应用程序中，在这些元素的父元素上添加类时，我观察到重新计算样式需要很长时间。当容器有这个类时，有选择器会影响每个子树的元素。