我正在审核移动网站的设计，手风琴在上面，下面有很多元素，当手风琴打开时，所有元素都会被推倒。 我想知道打开手风琴的行为是否会迫使移动浏览器重绘整个页面并减慢速度。 它是否正确？有没有更好的方式来看待这个？
答案 0 :(得分：2)
我想知道打开手风琴的行为是否会迫使手风琴 移动浏览器重绘整个页面并减慢速度。这是 正确的吗？
很难说：答案取决于：
但是，是的，根据以下资源，在页面顶部打开手风琴很可能会导致重排（*），这将涉及页面的其余部分。
（*）看一下文章，了解重绘和重排意味着什么
Alexander Skutin，What Every Frontend Developer Should Know About Webpage Rendering（2014年5月26日）
浏览器正在尽力限制重绘/重排到该区域 仅涵盖已更改的元素。例如，尺寸变化 绝对/固定定位元素仅影响元素本身 和它的后代，而静态的类似变化 定位元素触发所有后续元素的重排。
（大胆是我的）
因此，根据这一点，将手风琴放在页面顶部也会影响所有后续元素。
这篇较旧的文章似乎强调了同样的假设：
Nicole Sullivan，Reflows & Repaints: CSS Performance making your JavaScript slow?（2009年3月27日）
元素的回流导致所有孩子的后续回流 祖先元素以及DOM中跟随它的任何元素。
（大胆是我的）
有没有更好的方法来看待这个？
我知道你可能想从正确的方向开始设计你的设计，但我建议你不要过早地关注它。
您可能希望快速实现原型以确保您希望支持的设备上的性能可接受，并且作为最后一个资源，您仍然可以根据用户代理禁用不正确支持它们的设备的动画。 / p>
您可能希望您的开发人员看一下这篇文章，该文章有一些限制浏览器重排的可靠指南：
Lindsey Simon，Minimizing browser reflow
- 减少不必要的DOM深度。 DOM树中某个级别的更改可能会导致树的每个级别发生更改 - 一直到最后 root，以及一直到修改后的节点的子节点。 这导致花费更多时间进行回流。
- 最小化CSS规则，并删除未使用的CSS规则。
- 如果您进行复杂的渲染更改（如动画），请执行此操作。使用position-absolute或position-fixed来完成 此。
- 避免使用不必要的复杂CSS选择器 - 尤其是后代选择器 - 这需要更多CPU功率来进行选择器匹配。