我read on SO以及重新绘制和重新流动的其他地方浏览器的执行成本很高。
我很好奇重新绘制/ display:none和重新流动/ visibility:hidden的CSS / JS替代方案对浏览器的计算要求不高。
为了清楚起见，请纠正我，如果我错了，一个常见的重新流动方案就是当您在元素上设置display:none时要切换显示屏，例如下拉菜单。重新流动意味着浏览器首先“流动”，即显示元素和所有作为可见内容，但随后必须重新流动所有内容，因为需要隐藏下拉菜单。
关于重新流动和重新涂装的性能是否真正受到人们需要关注的问题的评论也是受欢迎的。
答案 0 :(得分：2)
我认为你误解了这句话。
如果您正在动态生成元素，请考虑以下两个场景：
方法1将为您添加的每个元素进行重新绘制。方法2最后只进行一次重绘。如果要添加的元素数量较少，方法1可能没问题。如果你要添加许多节点，方法2会快得多。
这就是重新涂漆昂贵的意思。
也许这是查看它的好方法：
重新绘制的基本成本为100.创建DOM元素并附加成本1.如果您正在为7个元素执行方法1，则成本将为（1 + 100）* 7 = 707。你正在做方法2，你的成本将是：1 * 7 + 100 = 107.这是相当低的。这些数字只是为了说明。可能还有很多比这更多的东西，但我认为这是一种看待重新油漆表现的好方法。
答案 1 :(得分：1)
没有简单的公式。首先，每个浏览器都有自己的方式来处理回流和重绘。通常，浏览器会尝试尽可能地推迟回流，因为它们可能非常昂贵，如您所知。
通常，请记住以下操作始终会触发重排：
offsetWidth getComputedStyle（或旧IE上的currentStyle）读取计算的CSS值（见When does reflow happen in a DOM environment?。）
设置样式通常会导致重排，但如果更改不会影响其他元素的位置或维度 [citation needed] ，浏览器会尽量避免使用。
有关回流的乐趣，请参阅Will it reflow?