javascript - Accordion 是否会导致整个页面重绘？

Question

我正在审查移动网站的设计， Accordion 位于顶部，下面有许多元素，当 Accordion 打开时，所有元素都会被推下。 我想知道打开 Accordion 的行为是否会迫使移动浏览器重绘整个页面并减慢速度。 它是否正确？有更好的方法来看待这个问题吗？

Answer 1

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?

很难说:答案取决于:

1. 您正在使用的浏览器及其实现的渲染算法
2. 页面的实际结构

但是，根据以下资源，打开页面顶部的折叠面板很可能会导致回流(*)，从而涉及页面的其余部分。

(*) 查看文章，了解重绘和回流的含义

亚历山大·斯库廷，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.

(粗体是我的)

因此，根据此，将 Accordion 放置在页面顶部也会影响所有后续元素。

另一篇较旧的文章似乎强化了相同的假设:

妮可·沙利文，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?

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

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

您可能希望您的开发人员看一下另一篇文章，其中有一些限制浏览器重排的可靠指南:

林赛·西蒙，Minimizing browser reflow

1. 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.
2. Minimize CSS rules, and remove unused CSS rules.
3. If you make complex rendering changes such as animations, do so out of the flow. Use position-absolute or position-fixed to accomplish this.
4. Avoid unnecessary complex CSS selectors - descendant selectors in particular - which require more CPU power to do selector matching.