手风琴会导致整个页面重绘吗？
Does accordion cause redraw of entire page?
我正在审查移动网站的设计，顶部有手风琴，下面有许多元素，当手风琴打开时，所有元素都被推下。
我想知道打开手风琴的行为是否会迫使移动浏览器重绘整个页面并减慢速度。
这个对吗？有没有更好的方法来看待这个问题？
I am wondering if the act of opening the accordion will force the
mobile browser to redraw the entire page and slow it down. Is this
correct?
不好说：答案取决于：
- 您使用的浏览器及其实现的渲染算法
- 您页面的实际结构
但是是的，根据以下资源，打开页面顶部的手风琴很可能会导致 回流(*)，这将涉及页面的其余部分.
(*) 查看文章，了解 repaint 和 reflow 的含义
Alexander Skutin，What Every Frontend Developer Should Know About Webpage Rendering（2014 年，5 月 26 日）
Browsers are doing their best to restrict repaint/reflow to the area
that covers the changed elements only. For example, a size change in
an absolute/fixed positioned element only affects the element itself
and its descendants, whereas a similar change in a statically
positioned element triggers reflow for all the subsequent elements.
（粗体是我的）
因此，根据此，将手风琴放在页面顶部也会影响 所有后续元素。
另一篇较旧的文章似乎强化了相同的假设：
妮可·沙利文，Reflows & Repaints: CSS Performance making your JavaScript slow?（2009 年，3 月 27 日）
Reflow of an element causes the subsequent reflow of all child and
ancestor elements as well as any elements following it in the DOM.
（粗体是我的）
is there a better way to look at this?
我知道您可能希望从一开始就将您的设计引向正确的方向，但我建议您不要过早地担心这一点。
您可能希望快速实现一个原型，以确保性能在您希望支持的设备上是可以接受的，并且作为最后的资源，您仍然可以根据用户代理为不正确支持它们的设备禁用动画.
您可能希望您的开发人员查看另一篇文章，其中有一些可靠的指南来限制浏览器回流：
林赛·西蒙，Minimizing browser reflow
- Reduce unnecessary DOM depth. Changes at one level in the DOM tree can cause changes at every level of the tree - all the way up to the
root, and all the the way down into the children of the modified node.
This leads to more time being spent performing reflow.
- Minimize CSS rules, and remove unused CSS rules.
- If you make complex rendering changes such as animations, do so out of the flow. Use position-absolute or position-fixed to accomplish
this.
- Avoid unnecessary complex CSS selectors - descendant selectors in particular - which require more CPU power to do selector matching.
我正在审查移动网站的设计，顶部有手风琴，下面有许多元素，当手风琴打开时，所有元素都被推下。 我想知道打开手风琴的行为是否会迫使移动浏览器重绘整个页面并减慢速度。 这个对吗？有没有更好的方法来看待这个问题？
I am wondering if the act of opening the accordion will force the mobile browser to redraw the entire page and slow it down. Is this correct?
不好说：答案取决于：
- 您使用的浏览器及其实现的渲染算法
- 您页面的实际结构
但是是的，根据以下资源，打开页面顶部的手风琴很可能会导致 回流(*)，这将涉及页面的其余部分.
(*) 查看文章，了解 repaint 和 reflow 的含义
Alexander Skutin，What Every Frontend Developer Should Know About Webpage Rendering（2014 年，5 月 26 日）
Browsers are doing their best to restrict repaint/reflow to the area that covers the changed elements only. For example, a size change in an absolute/fixed positioned element only affects the element itself and its descendants, whereas a similar change in a statically positioned element triggers reflow for all the subsequent elements.
（粗体是我的）
因此，根据此，将手风琴放在页面顶部也会影响 所有后续元素。
另一篇较旧的文章似乎强化了相同的假设：
妮可·沙利文，Reflows & Repaints: CSS Performance making your JavaScript slow?（2009 年，3 月 27 日）
Reflow of an element causes the subsequent reflow of all child and ancestor elements as well as any elements following it in the DOM.
（粗体是我的）
is there a better way to look at this?
我知道您可能希望从一开始就将您的设计引向正确的方向，但我建议您不要过早地担心这一点。
您可能希望快速实现一个原型，以确保性能在您希望支持的设备上是可以接受的，并且作为最后的资源，您仍然可以根据用户代理为不正确支持它们的设备禁用动画.
您可能希望您的开发人员查看另一篇文章，其中有一些可靠的指南来限制浏览器回流：
林赛·西蒙，Minimizing browser reflow
- Reduce unnecessary DOM depth. Changes at one level in the DOM tree can cause changes at every level of the tree - all the way up to the root, and all the the way down into the children of the modified node. This leads to more time being spent performing reflow.
- Minimize CSS rules, and remove unused CSS rules.
- If you make complex rendering changes such as animations, do so out of the flow. Use position-absolute or position-fixed to accomplish this.
- Avoid unnecessary complex CSS selectors - descendant selectors in particular - which require more CPU power to do selector matching.