Javascript 手风琴会导致整个页面的重画吗？

我正在回顾手机网站的设计，上面有手风琴，下面有很多元素，当手风琴打开时，所有元素都被按下。 我想知道打开手风琴的动作是否会迫使移动浏览器重新绘制整个页面并使其速度减慢。 这是正确的吗？有没有更好的方法来看待这个问题

我想知道打开手风琴的动作是否会迫使 移动浏览器重新绘制整个页面并使其速度减慢。这是吗 对吗

很难说：答案取决于：

正在使用的浏览器及其实现的渲染算法

页面的实际结构

但是，根据以下参考资料，打开页面顶部的手风琴很可能会导致回流，这将涉及页面的其余部分

（*）查看文章，了解重新喷漆和回流焊的含义

亚历山大·斯库廷（2014年5月26日）

浏览器正在尽最大努力限制重新绘制/回流到该区域 这仅包括更改的元素。例如，中的大小更改 绝对/固定位置的图元仅影响图元本身 和它的后代，而在一个静态的 定位元件触发所有后续元件的回流

（粗体是我的）

因此，根据这一点，将手风琴放在页面顶部也会影响所有后续元素

这篇旧文章似乎强化了同样的假设：

妮可·沙利文（2009年3月27日）

元素的回流导致所有子元素和子元素的后续回流 祖先元素以及DOM中它后面的任何元素

（粗体是我的）

---

有没有更好的方法来看待这个问题

我理解您可能希望从一开始就将您的设计引导到正确的方向，但我建议您不要过早地担心这一点

您可能希望快速实现一个原型，以确保您想要支持的设备上的性能是可接受的，并且作为最后一个资源，您仍然可以基于用户代理禁用不正确支持它们的设备的动画

您可能想让您的开发人员看看另一篇文章，其中有一些限制浏览器回流的可靠指导原则：

林赛·西蒙

减少不必要的DOM深度。DOM树中某个级别上的更改可能会导致树的每个级别上的更改—一直到 根，并一直向下进入修改节点的子节点。 这会导致花费更多的时间进行回流焊

最小化CSS规则，并删除未使用的CSS规则

如果进行复杂的渲染更改（如动画），请在流程外执行。使用绝对位置或固定位置来完成 这个

避免不必要的复杂CSS选择器，特别是后代选择器，它们需要更多的CPU能力来进行选择器匹配